使用 Jquery-pt 2 为 Div 一个接一个地制作动画

Question

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

Animate Divs One就在使用 Jquery 的其他之后

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

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

Answer 1

给它们一个公共类，使用 .each() 迭代它们，并使用.delay()，乘以迭代的当前索引号按持续时间。

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

< em>html

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

js

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

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

在循环中，index将为0、1、2等。因此延迟将为0、700、1400等。

---

编辑：

如果您无法为元素提供一个公共类，则只需将 ID 分组为一个 多重选择器。

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