Callback for jquery animation for multiple elements

Question

As you can see at this Fiddle, I animate more than one element at once, which is happening as I wish. But in the next step, I would like to do things ONCE the animation for all elements is over. Which does not seem to be possible by using the complete-function, because it is it fired for EACH completed animation (3 elemets, 3 times complete callback). the jquery .animate() API also says:

If multiple elements are animated, the callback is executed once per matched element, not once for the animation as a whole.

So, do you have any idea what I can do to have an event fired when every single animation has finished?

Answer 1

...animate(...).promise().done(function(){console.log("animate complete!")})

Answer 2

In your case, you can view currently animated with:

$(':animated').length

and on complete callback:

if($(':animated').length==1)
     console.log('whoohoo ready');

http://jsfiddle.net/Pz5YB/25/