javascript - 如何让鼠标事件的动画按顺序发生？

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