32

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');
});
3
  • 5
    toggle class is immediate and you don't need a callback for toggleClass, just place the alert('a') in the next line which will alert after toggleClass Apr 25, 2012 at 18:16
  • im trying to get $("#loader") to hide() after its faded out, how can I do this?
    – panthro
    Apr 25, 2012 at 18:17
  • im trying to get $("#loader") to hide() after its faded out, how can I do this? –
    – panthro
    Apr 25, 2012 at 18:18

2 Answers 2

75

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.

9
  • 1
    :) +1 for using deferred object. Apr 25, 2012 at 18:48
  • 14
    This solution requires jQuery UI.
    – Aryo
    Nov 10, 2013 at 7:51
  • without jquery ui it wouldn't be an animation, and hence wouldn't have a callback. your point?
    – Kevin B
    Nov 22, 2013 at 5:39
  • 2
    I see now, jquery ui isn't mentioned at all in the entire question, other than that comment.
    – Kevin B
    Apr 1, 2014 at 14:45
  • 10
    Yes :) And any reader that's not familiar with the various versions libraries of jQuery would really get confused when they just drop this code into their source (as many are wont to do). Anyway, maybe updating the answer to include the fact that jQuery UI, not the just typical jQuery library, is necessary would be helpful to future coders (again, as many will see the check and just grab the code)
    – d2burke
    Apr 2, 2014 at 13:41
1

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');
  });
}
4
  • im trying to get $("#loader") to hide() after its faded out, how can I do this? –
    – panthro
    Apr 25, 2012 at 18:18
  • @user1013512 Looks like toggleClass in jQuery UI effects doesn't have a callback.. Check out my updated post and let me know if that works out for you. Apr 25, 2012 at 18:24
  • 1
    @Vega does .toggleClass() give a deferred object? try .toggleClass().promise().done(function(){alert("done")}); Most animation methods if not all return a deferred object.
    – Kevin B
    Apr 25, 2012 at 18:38
  • @KevinB Amazing.. It works Kevin. I suggest you post that as an answer. jsfiddle.net/skram/4x76J Apr 25, 2012 at 18:45

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.