jquery function on toggleClass complete?

Question

How can I do a function once a toggleClass has completed? I've tried the following but with no luck:

$("#loader").toggleClass('fadeOut', function () {
    alert('a');
});

Answer 1

jQuery has a promise method that returns a promise that resolves after all running animations on selected elements are complete. At that point, you can bind to it's done method.

$("#loader").toggleClass('fadeOut',600).promise().done(function(){     console.log('a'); }); 

http://jsfiddle.net/skram/4x76J/

Note: Animations using toggleClass require jQuery UI.

Answer 2

toggleClass is executed immediately and so you don't need a callback for toggleClass, just place the alert('a') in the next line which will alert after toggleClass is executed.

Edit: Looks like you want jQuery UI Effects - toggleClass which unfortunately doesn't have a callback function.

Probably you should write your own toggle function. See below for fadeIn/fadeOut toggle,

var $loader = $("#loader");
if ($loader.is(':visible')) {
  $loader.fadeOut(100, function () {
      alert('fade out complete');
  });
} else {
  $loader.fadeIn(100, function () {
      alert('fadeIn complete');
  });
}