jquery - 随着 .each() 的每次迭代增加超时间隔

Question

我想在元素列表上触发动画，并使每次迭代的延迟增加一点。到目前为止，我在这里做了什么：

JS小提琴

var timer = 1000;

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

没有任何错误并且它在技术上是有效的，但是它们都同时进行动画处理。我知道它与这个类似的代码非常相似（几乎相同），但由于某种原因它不起作用。我错过了什么？

Answer 1

您可以使用索引参数来增加动画。

另外，您要针对循环内的所有元素，请改用第二个参数，它是当前迭代的元素

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

小提琴

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

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

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