JQuery queue/delay() inside each function

Question

I would like this function to delay each animation inside the each function. That is one after the other. At the moment they all come through together.

$('.bounceholder ul:eq(' + bounceholder + ') li').each(function(){
            $(this).delay(1000).animate({left: bounceoffset, top:-8, opacity:0.6, leaveTransforms:true}, {duration:600, queue:true});
            bounceoffset += 160;
        });

Marian Theisen · Accepted Answer · 2011-10-22 17:14:36Z

3

the block/function you pass to each can accept the counter/index as first argument:

$('.bounceholder ul:eq(' + bounceholder + ') li').each(function(i){
  delay = (i + 1) * 1000
  $(this).delay(delay).animate({left: bounceoffset, top:-8, opacity:0.6, leaveTransforms:true}, {duration:600, queue:true});
  bounceoffset += 160;
});

answered Oct 22, 2011 at 17:14

Marian Theisen

6,35232 silver badges40 bronze badges

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

Comments

Patrick Lee Scott · Accepted Answer · 2012-04-11 20:03:31Z

0

function DoAnimation(items, delay, bounceOffSet) {
    $(items[0]).animate({left: bounceoffset, top:-8, opacity:0.6, leaveTransforms:true}, {duration:600, queue:true})
        .delay(delay)
        .promise()
        .done(function() {
            items.splice(0, 1);
            if (items.length > 0)
            {
                DoAnimation(items, delay, bounceOffSet + 160);    
            }            
    });       
}

var items = $('.bounceholder ul:eq(' + bounceholder + ') li');

DoAnimation(items, 1000, 0);

answered Apr 11, 2012 at 20:03

Patrick Lee Scott

8,8093 gold badges39 silver badges43 bronze badges

Collectives™ on Stack Overflow

JQuery queue/delay() inside each function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related