使用 Jquery-pt 2 一个接一个地动画 div答案

【问题标题】：Animate Divs One Right After the Other with Jquery-pt 2使用 Jquery-pt 2 一个接一个地动画 div
【发布时间】：2010-12-16 13:35:42
【问题描述】：

请在此处查看我之前的问题：

Animate Divs One Right After the Other with Jquery

查看我的第二个答案....

谁能告诉我如何正确编写我的代码，以便我可以制作不止 2 个 div 的动画？如果可以的话，请给我一个至少 4 个 div 的例子。提前致谢。

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

给它们一个通用类，迭代它们with .each() 和use .delay()，将迭代的当前索引号乘以持续时间。

示例： http://jsfiddle.net/patrick_dw/jPeAp/

html

<div class="animation">Hello!</div>
<div class="animation">Jquery Animate!</div>
<div class="animation">Hello!</div>
<div class="animation">Jquery Animate!</div>

$('.animation').each(function( index ) {
    $(this).delay( index * 700 ).fadeIn();
});

这样它将自动适用于任意数量的元素。

在循环中，index 将是 0, 1, 2, etc.。所以延迟将是0, 700, 1400, etc。

编辑：

如果你不能给元素一个公共类，那么只需将 ID 分组到一个 multiple selector 中。

$('#animation1,#animation2,#animation3,#animation4').each(function( index ) {
    $(this).delay( index * 700 ).fadeIn();
});

【讨论】：

如果我有一堆完全不同的 ID 怎么办？
@WillingLearner：这就是你使用类而不是 ID 的原因。如果由于某种原因您不能分配一个类，那么只需创建一个带有所有 ID 的multiple selector。我将更新我的答案以说明如何。
如果我想在按下按钮时反转动画怎么办？
@WillingLearner：这取决于您所说的“反转动画”是什么意思。你的意思是从最后一个到第一个淡出它们？如果是这样，您可以.get() DOM 元素数组和.reverse() 顺序，然后将它们放回 jQuery 对象中，并执行与上述相同的操作。这不会颠倒页面上的顺序。就在数组中。 Here's an example.