Q:

Cancel the click trigger during an animation

In this demo, if the user clicks during the animation the click event is triggered multiple times.
So, if the user clicks three times then the click function initiates three times the animation after each animation completes.
How can I make so that the click event wouldn't be triggered if the user clicks during the animation?

A:

Try div:not(:animated) selector:
$('button').on('click',function(){
    $('div:not(:animated)').animate({'width':'500px'},5000,function(){
         $('div').css({'width':'20px'});   
    });
});

A:

There are several ways of doing this, one is to set a flag that will trace if the button has been clicked or not:
var clicked = false;

$('elm').click(function(){
 if(!clicked){
   clicked = true;
   // continue with animation//
    $('something').animate({
          //animation

     }, time, function(){
        // at the end of animation
        clicked = false
   });
 }
}

