如何按顺序进行鼠标事件的动画？

Question

我在某些元素中发现了一些鼠标事件illustrated here.

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

问题是：如果两个或多个鼠标事件被触发，它们不会等待前一个结束时触发，它们会立即触发。怎么办他们等他们的时间？

提前致谢。

Answer 1

尝试一下：

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

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

这是你想要的吗？

JSFiddle