使用Jquery-pt 2将其他动画划分为另一个

Question

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

Animate Divs One Right After the Other with Jquery

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

任何人都可以告诉我如何正确编写我的代码，以便我可以动画超过2个div吗？如果可以的话，请给我一个至少4个div的例子。提前谢谢。

Answer 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>

JS

$('.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();
});