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/

编辑:感谢 John S 的回复，已修复，但是我使用了自己的代码，尽管它的性能不是最好的，因为此时对我来说更清楚。

$('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();

工作 fiddle http://jsfiddle.net/m7PWT/6/

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'，而不是 'div[class="needs_animation"]'。即使元素具有多个类，前者也将起作用。