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');
});
Manse
  • 37,765
  • 10
  • 83
  • 108
panthro
  • 22,779
  • 66
  • 183
  • 324

2 Answers2

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.

Kevin B
  • 94,570
  • 16
  • 163
  • 180
  • 1
    :) +1 for using deferred object. – Selvakumar Arumugam Apr 25 '12 at 18:48
  • 14
    This solution requires jQuery UI. – Aryo Nov 10 '13 at 07:51
  • without jquery ui it wouldn't be an animation, and hence wouldn't have a callback. your point? – Kevin B Nov 22 '13 at 05:39
  • there would absolutely be animation without $.UI. you don't need that extra code just to perform an animation so that comment is completely valid. – d2burke Apr 01 '14 at 14:27
  • @d2burke See here, jQuery UI-less version doesn't animate. http://jsfiddle.net/4x76J/67/ where as the one WITH jquery ui does. http://jsfiddle.net/4x76J/66/ – Kevin B Apr 01 '14 at 14:32
  • I think I missed your point, because it wasn't necessarily relevant to Aryo's point: The bottom line is, jQuery UI is required for this solution. You can't just use this solution with the standard jQuery library. But yes, you're right, because there is no actual animation (as this cannot track CSS transitions) there's no tick. I read your comment as there isn't animation without UI. – d2burke Apr 01 '14 at 14:41
  • My point was the comment is irrelevant. the comment is completely valid, but it's pointless. Of course it requires jquery UI, it's a jquery ui method! Every answer to this question will involve jquery ui unless suggesting an entirely different way of solving it (such as css transitions) – Kevin B Apr 01 '14 at 14:43
  • 2
    I see now, jquery ui isn't mentioned at all in the entire question, other than that comment. – Kevin B Apr 01 '14 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 02 '14 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');
  });
}
Selvakumar Arumugam
  • 79,297
  • 15
  • 120
  • 134
  • im trying to get $("#loader") to hide() after its faded out, how can I do this? – – panthro Apr 25 '12 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. – Selvakumar Arumugam Apr 25 '12 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 '12 at 18:38
  • @KevinB Amazing.. It works Kevin. I suggest you post that as an answer. http://jsfiddle.net/skram/4x76J/ – Selvakumar Arumugam Apr 25 '12 at 18:45