循環播放動畫，然後停止

我試圖讓徽標像霓虹燈閃爍，然後停在徽標的「上」版本。我使用這個功能，動畫標誌，並給它的霓虹效果：循環播放動畫，然後停止

// make logo glow 
var $FlickImg = $('.logo img'), c = 0; 

(function loop(){ 
    var time = ~~(Math.random()*600) + 1; 
    $FlickImg.delay(time).fadeTo(30, ++c%2, loop); 
})();

的事情是，我希望它循環的時間（例如10）X數量後停止。我嘗試了一段時間，但是做了什麼就是停止X的動畫，然後開始。我想要的是相反的：動畫應該在加載時開始，並在10秒或10個循環之後停止。

來源

2013-09-26 El Andi

如果你要去櫃檯而不是@ T.J。克勞德的建議，然後記住你的'c'變量已經像計數器一樣工作，所以你不需要像現在所有的答案所建議的那樣創建一個新的變量。 – BYossarian

我要和@ T.J一起去。克羅德的建議。：）是很棒的。 –

@Byossarian：或者即使他/她*正在與我的方法一致，那麼就說說好點。 –

一關於jQuery動畫的偉大之處在於它們排隊，所以：

(function(){ 
    var i, time; 

    for (i = 0; i < 10; ++i) { 
     time = ~~(Math.random()*600) + 1; 
     $FlickImg.delay(time).fadeTo(30, ++c%2); 
    } 
})();

這將排列10次迭代的動畫，按順序進行。請注意，我們不需要使用回調，也不需要給函數一個名稱（這很好，因爲IE8獲得構造 —，這稱爲命名函數表達式 —錯誤; details）。或者你甚至可以完全擺脫這個功能，雖然它很適合範圍界定。

來源

2013-09-26 17:51:32

不錯！完美的作品！謝謝！ –

@ElAndi：很高興幫助！ –

對於10次迭代，你可以使用一個迭代變量：

var logo_loop_iterations = 0; 
(function loop(){ 
    if (++logo_loop_iterations == 10) return; 
    var time = ~~(Math.random()*600) + 1; 
    $FlickImg.delay(time).fadeTo(30, ++c%2, loop); 
})();

來源

2013-09-26 17:45:34 elimirks

你可以反變量添加到您的腳本：

var $FlickImg = $('.logo img'), c = 0; 
var count = 0; 

(function loop(){ 
    if (count==10) return; 
    count++; 
    var time = ~~(Math.random()*600) + 1; 
    $FlickImg.delay(time).fadeTo(30, ++c%2, loop); 
})();

來源

2013-09-26 17:47:47 jotaen

試試這個

var Count = 0; 
var myVariable= function(){ 
    if(Count <= 10) { 
      Count++; 
     var time = ~~(Math.random()*600) + 1; 
    $FlickImg.delay(time).fadeTo(30, ++c%2, loop); 
    } else { 
      clearInterval(myVariable); 
    } 
}; 

$(document).ready(function(){ 
    setInterval(myVariable, 10000); 
});

來源

2013-09-26 17:51:09

很好的解決方案，謝謝！ –

循環播放動畫，然後停止

回答

相關問題