Question

Sample jquery. Assume $cog is a cached selector of multiple items.

$cog.fadeOut('slow',function(){
    alert('hey');
})

In that example, of $cog is a jQuery object of 4 DOM elements, the above will fade each element out one by one, and trigger an alert each time on the callback (4 alerts).

I’d like to only call the alert when all 4 elements are done with their fadeOut function.

This:

$cog.fadeOut('slow',function(){
})
alert('hey');

when run, will show an alert, then the $cog elements disappear (I’m guessing due to timing issues with the fadeOut animation)

Is there a way when calling a function against multiple DOM objects in a jQuery object to know when it’s done with the last item?

Answer 1

You can simply count the callbacks back in.

Try this:

var remaining=$cog.length;
$cog.fadeOut('slow',function(){
    if((--remaining)==0)alert('hey');
})