jQuery等待第一個動畫在開始下一個動畫之前完成

Question

需要使用jQuery使DOM元素逐漸淡出，顯然我需要循環，因爲我有20個元素，我不知道如何在jQuery中創建循環我確實如下。

但是，回調不能正常工作，所有元素同時淡入，它應該等待第一個動畫完成，然後再次運行animate_element（）。

如果有更好的方法來做到這一點，我想知道它，但我也想知道爲什麼下面的代碼不起作用？

$('div').css("display", "none"); 
$('div').addClass("needs_animation"); 

function animate_element(){ 
    if ($("div[class='needs_animation']:first").length) { 

     $("div[class='needs_animation']:first").removeClass("needs_animation"); 

     $("div[class='needs_animation']:first").fadeIn(2000, animate_element()); 

    } 
} 

animate_element(); 

例子：http://jsfiddle.net/m7PWT/1/

編輯：固定感謝約翰■迴應，但我用我自己的代碼，即使它的性能不是最好的，因爲在這一點上它更清楚我。

$('div').css("opacity", "0"); 
$('div').addClass("needs_animation"); 

function animate_element(){ 
    if ($("div[class='needs_animation']").length) { 

     $("div[class='needs_animation']:first").animate({opacity:1}, 100, function() { 
      $("div[class='needs_animation']:first").removeClass("needs_animation"); 
      animate_element() 
     }); 

    } 
} 

animate_element(); 

工作撥弄

Answer 1

你是非常接近與你有什麼。你只有兩個錯誤：

（1）你應該將$("div[class='needs_animation']:first")的結果存儲在一個變量中。不僅效率更高，而且在這種情況下，您不希望在刪除課程後重新執行該課程，因爲您會得到不同的結果。 （2）當您將回調函數提供給.animate()時，不應在其後包含括號。你實際上是在呼喚它。

這裏是代碼可能是什麼樣子：

$('div').css("opacity", "0"); 
$('div').addClass('needs_animation'); 

(function animate_element(){ 
    var $div = $('div.needs_animation:first'); 
    if ($div.length) { 
     $div.removeClass('needs_animation'); 
     $div.animate({ opacity: 1 }, 2000, animate_element); 
    } 
})(); 

jsfiddle

還有一件事：當類選擇元素，使用'div.needs_animation'，而不是​​。即使元素具有多個類別，前者也可以工作。