jquery/javascript set multiple timeouts one after the other via loop to run independently of the other

Question

I am trying to animate a handful of DIV's to scroll upwards but I want one to scroll up after a pause after the other after the other. And the best I can come up with at the moment is

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

Problem is they still all animate together without pause. How can I go about doing something in this fashion. The divs are dynamically generated and there can be 5 - 20 of them so doing a hardcoded logic is out, any ideas?

epascarello · Accepted Answer · 2013-01-19 01:17:23Z

2

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

Another way like queue

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

edited Jan 19, 2013 at 1:17

answered Jan 19, 2013 at 0:24

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lix Over a year ago

They say that there's more than one way to skin a cat. No where else can you understand this more than on Stack Overflow. That's some slick looking code :P +1 from me!

chris Over a year ago

+1 from me as well and this works nice and smooth.. only thing I need to figure out from this and hopefully I can with a little play is how to make it not necessarily go in sequence like it is, where one starts after the other completes, but starts while the other is running.. ultimately by the time it reaches the last one, they are still all moving up.. think of the row row row your boat song, where other people join in after a verse or two, similar effect if i had to put it verbally.

epascarello Over a year ago

Well this is not going to work since it will wait til it is done. For that you need to use a setTimeout to start the next like you are doing.

Lix · Accepted Answer · 2013-01-19 00:20:10Z

0

Looks like a simple recursive function might work for you here -

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

edited Jan 19, 2013 at 0:20

answered Jan 19, 2013 at 0:09

Lix

48.2k12 gold badges107 silver badges134 bronze badges

Collectives™ on Stack Overflow

jquery/javascript set multiple timeouts one after the other via loop to run independently of the other

2 Answers 2

3 Comments

Here's a simple demo

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related