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

工作小提琴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"]'。即使元素有多个类，前者也会起作用。

jQuery在开始下一个动画之前等待第一个动画完成

1 个答案: