javascript – jquery – 每次迭代的.each()增加超时间隔

我想在元素列表上触发动画,并且每次迭代都会延迟一点.我到目前为止已经完成了我的工作：

JS Fiddle

var timer = 1000;

$('div').each(function(){
        setTimeout(function(){
            $('div').animate({
                width:200,
                height:200,
                opacity:1
            }, 1000);
        }, timer);
        timer += 1000;
});

没有任何错误,它在技术上有效,但它们同时具有动画效果.我知道它与similar code非常相似(几乎完全相同),但由于某种原因,它不起作用.我错过了什么？

解决方法:

您可以使用index参数随时增加动画.

此外,您要定位循环内的所有元素,而是使用第二个参数,这是当前迭代的元素

$('div').each(function(i, elem){
    setTimeout(function(){
        $(elem).animate({
                width:200,
                height:200,
                opacity:1
        }, 1000);
    }, 1000 * i);
});

FIDDLE

jQuery还有一个可用于动画的delay()方法

$('div').each(function(i, elem){
    $(elem).delay(i * 1000).animate({
        width   : 200,
        height  : 200,
        opacity : 1
    }, 1000);
});

div {
  width:0;
  height:0;
  opacity:0;
  display:block;
  margin:0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background:#f00;"></div>
<div style="background:#000;"></div>
<div style="background:#ccc;"></div>