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();

running example

另一种方式，如队列

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);

Here's a simple demo