How with JQuery to disable click until animation done

Posted on: January 21, 2013

You may want to animate something before doing an action and remove the possibility to the user the press again. This is often a desired behavior because it might broke the current animation or simply doing nothing which will lead the user in a false impression of bug.

The solution is to disable the button (or link) during the animation.

1function clickFunction(obj) { 
2  //If animated than we wait the animation to be over 
3  if ($(':animated').length) { return false; }
4
5obj.animate({ 
6  //Animation here that is executed one but if clicked before 
7  //this one is over won't be reached 
8  , 4000); 
9}

The above code work with JQuery framework and check if the animated queue contain any element. If yes, the function called by the click return false and doesn't do anything. In fact, you could here write something to the screen if you want to inform the user that something is occurring and that he should wait.