Can I emulate a callback function from jquery removeClass?

Question

I'm trying to execute these removeClass calls in succession. There doesn't seem to be a call back function using removeClass so is there another way to emulate this?

  $("#card1").removeClass('flip');

  //wait for card1 flip to finish and then flip 2
  $("#card2").removeClass('flip');

  //wait for card2 flip to finish and then flip 3
  $("#card3").removeClass('flip');

Nippy

there's no waiting for removing a class from an element.you remove it and add it.what's the point? – Ephod

It's part of transitions with CSS3 so I'm looking for a fun effect. – Nippy

Answer 1

It seems that you're using CSS3 transition for doing this. The easiest way to do this is to set delay manually:

$("#card1").removeClass('flip');

setTimeout(function(){
   //wait for card1 flip to finish and then flip 2
   $("#card2").removeClass('flip');
}, 500);

setTimeout(function(){
   //wait for card2 flip to finish and then flip 3
   $("#card3").removeClass('flip');
}, 1000);

There's no built in jQuery method to check that css transition is complete.

Lime

The transitionEnd event (or webkitTransitionEnd etc) should work. – Marler

...or mozTransitionEnd etc. I think timer is better nowadays and will be more bulletproof in case that transitionEvent event wont fire. – Lime

It might be better to nest the timeouts instead of calling one after the other. – Guarino

Answer 2

Old Tread but Goolge know him ;-)

jQueries UI has a extend Function for removeClass.

<div class="big-blue"></div>

$( "div" ).click(function() {
  $( this ).removeClass( "big-blue", 1000, "easeInBack", function(){
      // do fancy stuff after animation is completed
  });
});

jQuery-UI Doc: http://api.jqueryui.com/removeclass/

Gussy