Delaying multiple animations with jQuery

A useful trick to have animations finishing before triggering interactions

The trick is to use jquery queue to queue functions, and to use delay and clear when needed.

Here is an example of the implementation with mouseenter and mouseleave events:

$(".item").on('mouseenter', function(e){ 
    $(this).clearQueue().delay(800).queue(function(){
        // animations here
        $(this).dequeue();
    });
});
$(".item").on('mouseleave', function(e){
    $(this).clearQueue().delay(400).queue(function(){
        // animations here
        $(this).dequeue();
    });
});

Using the code above you can have for example mouseleaves animations starting only when mouseenter animations finish, just set the mouseleaves delay to the duration of the mouseenter animations.

The dequeue method call assures that if you have multiple items queued, the next one in the queue gets executed.

You can see the queue delay in action on the demos of this article. For more informations on how jquery queue works see this stackoverflow.