Question

简而言之，我正在寻找一个jQuery循环，它将选择每个div与一个类（一行中大约10个小div）然后在每个div上执行一些代码，特别是淡出和div中包含的图像然后暂停并继续前进并对下一个div做同样的事情。

这个循环同时淡出/包含所有包含的图像......

$('.div_class').each(function() {
    $(this).children().fadeOut('fast', function() {
        $(this).fadeIn('slow');
    });
});

我查看了jquery函数delay()和setInterval()以及本机JavaScript函数setTimeout()。

我似乎无法让他们完全工作，或者我看到的例子冗长而复杂。有了jquery的魔力，似乎我应该能够在上面的循环中添加非常少的代码，以便它能够串联工作。

如上所述，我正在寻找一个简洁的例子。

Answer 1

您可以将.delay()与.each()为回调提供的索引结合使用，如下所示：

$('.div_class').each(function(i) {
    $(this).children().delay(800*i).fadeOut('fast', function() {
        $(this).fadeIn('slow');
    });
});

这会背靠背（快速= 200 +慢= 600），如果你想要更多延迟，只需将800增加到你想要的任何东西。在上面的例子中，第一个是立即运行，接下来的800毫秒后，接下来的800个，等等。

Answer 2

$('.div_class').each(function(index) {
    // delay inserted before effect (based off index)
    $(this).children().delay(index * 1000).fadeOut('fast', function() {
        $(this).fadeIn('slow');
    });
});

* Glares at Nick *

这是另一种可行的方式。这不使用如上所述的定时延迟，而是使用递归方法，其中一个动画的完成将导致下一个动画的执行。

function animate (elms) {
   var target = elms[0]
   if (target) { // guard to ensure still more
       $(target).children().fadeOut('fast', function() {
           $(this).fadeIn('slow')
           // o/` take one down, pass it around,
           //     98 elements of goop in the list o/`
           animate(elms.slice(1))
       }
   }
}
animate($('.div_class').get())

Jquery .each（）包括寻找干净代码的延迟

2 个答案: