jQuery multiple animate() callback

Question

I'm trying to animate a set of elements simultaneously (almost, there's a small delay between each animation):

$('.block').each(function(i){
   $(this).stop().delay(60 * i).animate({
     'opacity': 1
   }, {
      duration: 250,
      complete: mycallbackfunction // <- this fires the callback on each animation :(
   });
});

How can I run a callback function after all animations have completed?

you can have each individual anim. increment a value, and if that value is = number of animations, then run the actual function — davidosomething
– davidosomething, Commented Apr 28, 2011 at 18:43
is there a reason you can't call mycallbackfunction after the entire $(".block").each statement? or am i misunderstanding your code? — Thomas Shields
– Thomas Shields, Commented Apr 28, 2011 at 18:44
yes. If I do that, the function will be executed right away. I want to wait for the animations to finish, then execute it — Alex
– Alex, Commented Apr 28, 2011 at 18:45

kcbanner · Accepted Answer · 2011-04-28 19:03:32Z

5

Use a closure around a counter variable.

var $blocks = $('.block');
var count = $blocks.length;
$blocks.each(function(i){
   $(this).stop().delay(60 * i).animate({
     'opacity': 1
   }, {
      duration: 250,
      complete: function() {
        if (--count == 0) {
          // All animations are done here!
          mycallbackfunction();
        }
      }
   });
});

Note the saving of the list of items into the $block variable to save a lookup.

edited Apr 28, 2011 at 19:03

answered Apr 28, 2011 at 18:45

kcbanner

4,0781 gold badge27 silver badges18 bronze badges

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

6 Comments

Java Drinker Over a year ago

just do the decrement in myCallbackFn()... but ya this is the only answer I see

kcbanner Over a year ago

In order to do the decrement in mycallbackfunction(), it needs to be defined in the same scope as count. The OP's example didn't show where mycallbackfunction() was defined.

Alex Over a year ago

thanks! this seems to work :D but you have a mistake: it should be if (count == 0) mycallbackfunction();

Alex Over a year ago

ps: do you know how can I decrement and check count at the same time?

kcbanner Over a year ago

You can do it like this: if (--count == 0) { ...}

|

Felix Kling · Accepted Answer · 2011-09-11 13:19:14Z

4

Since jQuery 1.5, you can use $.when ^[docs], which is a bit easier to write and understand:

var $blocks = $('.block');

$blocks.each(function(i){
   $(this).stop().delay(60 * i).animate({
     'opacity': 1
   }, {
      duration: 250
   });
});

$.when($blocks).then(mycallbackfunction);

DEMO

answered Sep 11, 2011 at 13:19

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

1 Comment

antitoxic Over a year ago

That will trigger the callback even if the animations were stopped via .stop().

antitoxic · Accepted Answer · 2011-09-29 18:26:45Z

4

Felix Kling's answer will fire the callback when there's no animation left to do. This makes the callback firing even if the animation is stopped via $el.stop() and thus not completed to the end.

I found an method by Elf Sternberg using deferred objects which I implemented in this jsfiddle:

http://jsfiddle.net/8v6nZ/

answered Sep 29, 2011 at 18:26

antitoxic

3,8681 gold badge41 silver badges48 bronze badges

Comments

Jishnu A P · Accepted Answer · 2011-04-28 18:56:12Z

1

   var block = $('.block');
   block.each(function(i){
   $(this).stop().delay(60 * i).animate({
     'opacity': 1
    }, {
      duration: 250,
      complete: i== (block.length-1) ? myCallbackFunction : function(){}
    });
   });

answered Apr 28, 2011 at 18:56

Jishnu A P

14.4k8 gold badges42 silver badges52 bronze badges

Comments

mVChr · Accepted Answer · 2011-04-28 18:56:30Z

1

$('.block').each(function(i){
   $(this).stop().delay(60 * i).animate({
     'opacity': 1
   }, {
      duration: 250,
      complete: ((i == $('.block').length - 1) ? mycallbackfunction : null)
   });
});

answered Apr 28, 2011 at 18:56

mVChr

50.3k11 gold badges111 silver badges105 bronze badges

Collectives™ on Stack Overflow

jQuery multiple animate() callback

5 Answers 5

6 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related