Jquery .each() 包括寻找干净代码的延迟

Posted 2023-05-08

【中文标题】Jquery .each() 包括寻找干净代码的延迟

【英文标题】：Jquery .each() including a delay looking for clean code

【发布时间】：2011-05-07 19:07:59

【问题描述】：

简而言之，我正在寻找一个 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 的魔力，似乎我应该能够在上面的循环中添加非常少的代码，使其能够连续工作。

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

【问题讨论】：

api.jquery.com/delay -- 默认使用效果队列。所以把它放在淡出之前，它应该可以解决问题。快乐编码。

【参考方案1】：

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

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

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

【讨论】：

完美清洁，完全按照罐头上说的做 - 并在 10 分钟内回答，一定会爱上 *** - 干杯 nick

【参考方案2】：

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

* 瞪着尼克 *

这是另一种方法。这并没有像上面那样使用定时延迟，而是使用递归方法，其中一个动画的完成将导致下一个动画的执行。

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())

【讨论】：

嘿，看起来很眼熟... :)