一次迭代一个子元素

Question

正如标题所述,我正在尝试迭代一系列子元素,当我尝试逐个淡出它们时会遇到麻烦,我正在$.each()尝试实现这一点,但它似乎正在逐渐消失我想要做的就是等待动画完成,然后转到下一个子元素并将其淡出,这是我的代码,

jQuery的:

var children = $("container").children();

children.each(function(){
    $(this).fadeOut('slow');
})

HTML:

<div id="container">
    <div style="background: #F00;"></div>
    <div style="background: #00F;"></div>
    <div style="background: #0F0;"></div>
</div>

是否可以在当前动画完成之前触发动画,但是可以按设定的间隔延迟动画？

提前致谢!

Answer 1

这是一个略有不同的方法:

创建一个包含所有子元素的数组,而不是使用jQuery对象的初始代码.

var children = [];
$("#container").children().each(function() {
    children.push(this);
});

创建一个函数,一次从数组中弹出一个元素并为其设置动画,递归调用自身作为回调函数,这样它只会在上一个动画结束后执行.

function fadeThemOut(children) {
    if (children.length > 0) {
        var currentChild = children.shift();
        $(currentChild).fadeOut("slow", function() {
            fadeThemOut(children);
        });
    }
}

查看有关jsFiddle的工作演示.

希望这可以帮助 !