Question

When animating in jQuery, what’s best practice for firing a callback only when ALL elements are done animating and not for each element?

For example:

$('.someElements').fadeOut('fast', function() {
  // dont do this until ALL elements are done fading
}

Answer 1

This could be a snippet to try:

var numberOfElements = $('.someElements').length;

$('.someElements').fadeOut(fast, function() {
  if( numberOfElements-- > 0 ) return;
  alert('call the Fireman!'); 
});

The alert Is just a placeholder to the end-callback you need to fire.

EDIT (another way):

You can also catch all the elements but not the last one.

$('.someElements').not(.someElements:last).fadeOut();

and then add a fadeOut with callback only to It

$('.someElements:last').fadeOut(fast, function (){ 
   // do something, it's the end of the world
};