jQuery在.each（）循环中使用.delay（）方法

Question

使用以下代码，我希望li元素逐个淡入淡出，但是所有元素一起消失：

$('li').each(function () {
    $(this).delay(1000).fadeIn(1000);
});

任何人都可以解释为什么他们不会一个接一个地消失吗？

Answer 1

.delay来电不会立即停止循环播放，因此所有延迟和动画都会立即启动（非常多）。

最简单的解决方案是将延迟错开当前索引号：

$('li').each(function(index) {
    $(this).delay(1000 * index).fadeIn(1000);
});

更好的解决方案是使用伪递归循环和＆＃34;完成回调＆＃34;触发下一次迭代的动画：

var els = $('li').get();
(function loop() {
    if (els.length) {
        var el = els.shift();
        $(el).fadeIn(1000, loop);
    }
})();

这种方法通常是首选，因为它确保下一个淡入不可能在前一个完成之前开始，并且还避免创建多个并行延迟/淡入淡出队列（每个元素一个），因为第二个动画不是排队直到第一个完成。

Answer 2

我想这是因为你基本上告诉每个li等待1秒并淡入。这就是他们所做的事情：）

目前，您的代码类似于：

$('li').delay(1000).fadeIn(1000);

尝试类似的东西：

var delay = 0;
$('li').each(function () {
    $(this).delay(delay).fadeIn(1000);
    delay += 1000;
});

或者，正如 Alnitak 建议的那样，更简洁的方法是使用$.each()提供的当前索引：

$('li').each(function (index) {
    // index will return the loop index starting to 0
    $(this).delay(index*1000).fadeIn(1000);
});

Answer 3

原因each没有延迟。每个延迟几乎同时应用。

你可能想尝试使用complete部分做fadeIn下一个元素

.fadeIn( [duration ] [, complete ] )

jQuery api doc

Answer 4

这是对jQuery.each的误解。这并不意味着为一个人做，然后在继续之前等待完成，因为你需要使用一个承诺。

相反，请尝试将延迟更改为数组中每个LI的索引的倍数，例如：

$('li').each(function(index) {
  $(this).delay((index + 1) * 1000).fadeIn(1000);
});

由于数组索引总是从0开始，0 * 1000 = 0，所以在乘以1000之前我已经在索引中加1，以确保第一个在1秒后发生，第二个在2秒后发生，依此类推。 / p>

如果你不希望1s延迟到第一个li淡入，那么它只是：

$('li').each(function(index) {
  $(this).delay(index * 1000).fadeIn(1000);
});