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上的工作演示。

希望这有帮助！

Answer 2

你想在前一次褪色后逐一淡化吗？

<强> See this example on jsFiddle

el.fadeOut("slow", function() {
    // Fade next (see example)
});

<强> Reference for fadeOut

.fadeOut( [ duration ], [ callback ] )
- duration: A string or number determining how long the animation will run.
- callback: A function to call once the animation is complete.

Answer 3

为每个后续淡出添加增加delay：

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

var delayInterval = 0;
children.each(function(){
    if (delayInterval > 0) $(this).delay(delayInterval);
    $(this).fadeOut('slow');
    delayInterval += 300;
})

您可能需要调整延迟增量以满足您的需求。

Answer 4

我认为你会想要使用类似$.queue之类的内容，这样你就不会自己想出所有动画的持续时间和时间。在Stack Overflow上链接到$.queue的jQuery的this question文档应指向正确的方向。

Answer 5

Giv支持你的DIV自己的身份证，而且你可以一次性使用身份证和褪色身份证。例如：

var children = $（“container”）。children（）。each（function（） {

for（var k = 0; k＆lt; $（this）.attr（'id'）。length; k ++） {
$（本）.attr（ '身份证'，$（本）.attr（ '身份证'））; }

$（本）.attr（ 'ID'）淡出（ '慢'）; }）;

一次迭代一个子元素

5 个答案: