Q:

How to do animations of mouse events occur in order?

I've some mouse events in some elements as illustrated here.
$("div").on("mouseenter mouseleave", function(){
    $(this).toggleClass("bigDiv", 1000);
});

The problem is: if two or more mouse events are fired, they don't wait the previous finish to fire, they fire immediately. How to do they wait their time?
Thanks in advance.

A:

Give this a try:
jQuery(function($) {
    $("div").on("mouseenter", function(){
        if(!$('div').is(':animated'))
            $(this).addClass("bigDiv", 1000);
    });

    $("div").on("mouseleave", function(){
        $(this).removeClass("bigDiv", 1000);
    });
});

Is this what you wanted?
JSFiddle

