jquery - 每次迭代的.each（）增加超时间隔

Question

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

JS Fiddle

var timer = 1000;

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

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

Answer 1

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

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

GET https://www.googleapis.com/drive/v3/files/{fileId}?fields=appProperties%2CfileExtension%2Ckind%2CmimeType%2Cshared&key={YOUR_API_KEY}


{
 "kind": "drive#file",
 "mimeType": "application/vnd.google-apps.document",
 "shared": true
}

FIDDLE

jQuery还有一个可用于动画的$('div').each(function(i, elem){ setTimeout(function(){ $(elem).animate({ width:200, height:200, opacity:1 }, 1000); }, 1000 * i); }); 方法

＆＃13;

＆＃13;

delay()

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;