javascript - jquery/javascript 通过循环一个接一个地设置多个超时以独立于另一个运行

Question

我正在尝试为少数 DIV 设置动画以向上滚动，但我希望一个在一个又一个暂停后向上滚动。我现在能想到的最好的就是

$('.curtain').each(function()
{
    var $elem = $(this);
    setTimeout(function()
    {
        $elem.animate({"height":0+'px'}, 2000);
    }, 1000);
});

问题是它们仍然没有停顿地一起动画。我怎么能以这种方式做某事。div 是动态生成的，其中可以有 5 - 20 个，所以硬编码逻辑已经过时了，有什么想法吗？

Answer 1

function animateIt () {
    var elems = $('.curtain').get();
    (function next() {        
        if(elems.length){
            var elem = $(elems.shift());
            elem.animate({"height":0+'px'}, 2000, next);
        }
    })();
}
animateIt();

运行示例

另一种方式，如队列

function animateIt () {
    var divs = $('.curtain');
    divs.each( function(){
        var elem = $(this);
        $.queue(divs[0],"fun", function(next) { elem.animate({"height":0+'px'}, 2000, next); });               
    });
    divs.eq(0).dequeue("fun");
}

Answer 2

看起来一个简单的递归函数可能对你有用 -

function doAnimation(elapsed){
  var iterations = $('.curtain').length;
  var current = elapsed+1;
  if (current <= iterations){
   setTimeout(function(){
      $('.curtain:eq(' + elapsed + ')').animate(...);
      doAnimation(current);
    },50);
  }
}

doAnimation(0);

这是一个简单的演示