如何使用.delay（）和.queue（）循環播放幻燈片？

Question

我有一個setInterval()它有效地循環一組圖像相互之間淡入淡出。

這裏是一個小提琴：http://jsfiddle.net/CBWKa/

我遇到的問題是一樣的，因爲這雖然：My recursive setTimeout function speeds up when tab becomes inactive

當你切換標籤離開了幾分鐘，然後切換回動畫加速大幅差不多就像它試圖「跟上」自己一樣。

所以，我已經瞭解到，來解決這個問題的最好方法是使用.delay()和.queue()而不是JavaScript的setTimeout和setInterval功能。然而，我不能解決如何使用這兩個函數創建一個循環動畫函數幾個元素（不只是一個）。

誰能幫助我嗎？

謝謝。

Answer 1

與.delay（）和.queue（）的經典模式是這樣的：

$('element').animate(…).delay(timeout).queue(function(next){ 
    // do whatever you like after the timeout; 
    next(); 
}); 

要連接您的動畫，你也可以使用回調參數從淡入淡出和。例如。

$('some').delay(timeout).fadeOut('slow', function(){ 
    // do something after fading 
}); 

---

但無論如何在jQuery的定時東西我總是建議插件的jQuery定時。這使得連接不同的動畫更容易。

與jQuery，定時你完全衰落週期的代碼只能與一個行完成：

$('.slides img').repeat().each($).fadeIn().wait(2000).fadeOut(); 

這就是全部。