jQuery等待第一个动画完成，然后再开始下一个动画

需要使用jQuery使DOM元素一个接一个地淡入，显然我需要循环，因为我有20个元素，我不知道在jQuery中创建循环的正确方法，所以我做了以下工作

但是回调不能正常工作，所有元素同时淡入，它应该等待第一个动画完成，然后再次运行animate\u 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();

示例：

编辑：由于John的回答，修复了这个问题，但是我使用了自己的代码，尽管它的性能不是最好的，因为这一点对我来说更清楚

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

---

拉小提琴

你与你所拥有的一切非常接近。你刚才犯了两个错误：

（1） 您应该将

$（“div[class='needs\u 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);
    }
})();

---

还有一件事：当按类选择元素时，使用

'div.needs\u animation'

，而不是

'div[class=“needs\u animation”]

。即使元素有多个类，前者也可以工作。

@user3185872-这是个好问题。起初我没有仔细查看您的代码，但我一直没有看到它。我马上就看到一个问题。重复

$（“div[class='needs\u animation']：first”）

，而不是将其存储在变量中。这不仅仅是性能问题；删除该类后，将产生不同的结果。但是仅仅进行更改仍然无法使其正常工作。有意义的是，谢谢，这是我使用jQuery的第一天，但我来自PHP背景。@user3185872-我被延迟了一段时间，但我发现了为什么您的代码无法正常工作。请参阅我的最新答案。我修改了答案中的代码，使之更像您原来的代码，这实际上非常好。你一开始对它应该如何工作有一个很好的想法。