Jquery - using toggle() but disable it until the animations are done

Question

Hey,

i am using the jquery toggle function like this:

$(".class").toggle( function() { //things to do... animations and so on }, function(){ // other things to do... } );

Now when I call the toggle effect by clicking very often the animations of the two functions don't wait for the other to finish. So I would like to disable the toggle effects undtil the stuff in each function is finished. So when the first function is called by the toggle the second one should not be called by another click on the .class element. And the other way round

Any idea how i could do that?

Thanks in advance, Phil

Answer 1

You could add a .click() handler bound before the toggle that does this, for example:

$(".class").click(function() {
  if($(".selector:animated").length) 
    return false;
}).toggle(function() { 
  //things to do... animations and so on 
}, function(){
  // other things to do... 
});

What this does is if the check for your selector and :animated found any elements (they're still animating), it'd return false and prevent the .toggle() handler from even getting hit. This works because event handlers are executed in the order they were bound, so if the first one returns false, the second won't run.