jquery callbacks being called multiple times

Question

When I use the fade/slide/animate functions in jQuery the callback gets called multiple times for each element the effect is applied to. This is by design of course. I just want to know when the last callback is called.

Here is what I came up with- it fades out all the divs and displays an alert() when the last callback is fired.

$("div").fadeOut(1000, function ()
{
     if ($("div").index($(this)) == $("div").length-1)
          alert("this is the final callback");
});

Is there a simpler way to check which callback is the last one or is this the only way to do it?

Answer 1

Try taking a look at the jQuery documentation for .promise()

This should work:

$('div').fadeOut(1000).promise().done(function() {
   alert('all done');
});

As usualy, the jQuery documentation on this is really vague. But I'm not sure I could do