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'，而不是​​。即使元素具有多个类别，前者也可以工作。