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

$("div:not(:last)").fadeOut(1000);
$("div:last").faedOut(1000, funtion() {
    alert("Hey!");
});

Answer 2

That would produce the alert when the fadeOut on the last element was called. That would not necessarily be the last fadeOut.

var numDivs = $('div').length;
$('div').fadeOut(1000, function() {
  if( numDivs-- > 0 ) return;
  alert('this is the final fadeout to complete');
});

Answer 3

What you are doing seems fine, a more jQuery'ish version might be:

$("div").fadeOut(1000, function ()
{
     if ($(this).is(':last')) {
          alert("this is the final callback");
     }
});