jQuery .each()包括寻找干净代码的延迟 [英] Jquery .each() including a delay looking for clean code

问题描述

简而言之，我正在寻找一个jQuery循环，该循环将选择一个具有类的每个div(一行中大约10个小div)，然后在每个div上执行一些代码，这些代码专门淡出并包含在div和然后暂停并继续前进，直到下一个div.

To be short, I am looking for a jQuery loop that will select each div with a class (approx 10 small divs in a line) then execute some code on each div specifically fade out and in the image contained in the div and then pause and move on and do the same to the next div.

此循环同时淡出/显示所有包含的图像...

This loop fades out/in all of the contained images at the same time...

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

我看过jquery函数delay()和setInterval()以及原生JavaScript函数setTimeout().

I have looked at the jquery functions delay() and setInterval() and the native JavaScript function setTimeout().

似乎我根本无法使它们工作，或者我所看到的示例冗长而复杂.有了jquery的魔力，似乎我应该能够在上面的循环中添加很少的代码，以便它可以串联工作.

It seems I either cant get them to work at all or the examples I have seen are lengthy and complicated. With the magic of jquery it seems I should be able to add very little code the the loop above for it to work in series.

如上所述，我正在寻找一个干净的简单示例.

As mentioned, I'm looking for a clean simple example.

推荐答案

您可以将 .delay() 与将 .each() 提供给回调的索引，如下所示:

You can use .delay() in combination with the index the .each() provides to the callback, like this:

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

这将使它们背对背(快= 200 +慢= 600)，如果您想要更多的延迟，只需将800增加到所需的值即可.在上面的示例中，第一个立即运行，接下来的800毫秒之后运行，之后的下一个800继续运行，等等.

This would do them back to back (fast = 200 + slow = 600), if you wanted more delay just increase that 800 to whatever you want. In the above example the first runs immediately, the next 800ms later, the next 800 after that, etc.

这篇关于jQuery .each()包括寻找干净代码的延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！