循環「動畫」由添加的/ removeClasses

Question

我試圖循環的添加和刪除類的「動畫」：

function loading() { 
    $('#loading').removeClass().addClass('load0').delay(5000).removeClass().addClass('load1').delay(5000).removeClass().addClass('load2').delay(5000).removeClass().addClass('load3').delay(5000, loading); 
} 
loading(); 

兩個問題：

1. 它不會出現removeClass()和addClass()可以排隊delay()。
2. delay()似乎不接受回調函數。

我該怎麼做？

Answer 1

var l = $('#loading'), 
    i = 0; 

(function loading() { 
    l.removeClass().addClass('load' + i); 
    i = ++i % 4; 
    setTimeout(loading, 5000); 
})(); 

---

或者，我們可以封裝的變量太多。

(function loading(l, i) { 
    l.removeClass().addClass('load' + i); 
    setTimeout(function() { 
     loading(l, ++i % 4); 
    }, 5000); 
})($('#loading'), 0); 

---

現代瀏覽器使這一點清潔劑。

(function loading(l, i) { 
    l.removeClass().addClass('load' + i); 
    setTimeout(loading, 5000, l, ++i % 4); 
})($('#loading'), 0); 

Answer 2

不能用於非動畫功能

使用setTimeout，而不是用自己的回調可能會制定出更好的使用delay。

Answer 3

如果我們試圖循環動畫，爲什麼不使用帶回調函數的.animate（）循環動畫？

例小提琴： http://jsfiddle.net/Culyx/fsxpZ/1/

在曾經是一個圖像只是此刻的佔位符的div小提琴的「箭頭」;但這應該是jQuery中循環動畫的另一種方式。代碼爲循環動畫：

$(document).ready(function() { 

    //looping bouncing arrow animation and speed controls 
    var arrowSpeed = 400; 
    bounceLeft = function() { 
     $(".arrow").animate({ 
      left: "+=50px" 
     }, { 
      duration: arrowSpeed, 
      complete: bounceRight 
     }); 
    } 
    bounceRight = function() { 
     $(".arrow").animate({ 
      left: "-=50px" 
     }, { 
      duration: arrowSpeed, 
      complete: bounceLeft 
     }); 
    } 
    bounceLeft(); 
});