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

Question

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

Animate Divs One Right After the Other with Jquery

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

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

Answer 1

给它们一个公共(public)类，迭代它们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>

js

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

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

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

<小时/>

编辑:

如果您无法为元素指定一个公共(public)类，则只需将 ID 分组为一个 multiple selector .

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