jquery - 如何防止mouseenter/mouseleave事件动画 "crossover"？

Question

目前我有以下脚本支持动态 div 内容:

$("a.mbl").click(function() {

    var mblid = $(this).attr("id");

    $("#mid-box-left").fadeOut(250, function() {
        $("#mid-box-left").html($("#mbl" + mblid).html())
        .hide()
        .fadeIn(250, function () {
            $('#mid-box-left')

            $("#mid-box").on("mouseenter", "a.testbox", function() {

                var tbid = $(this).attr("id");

                $("#mid-box-right").fadeOut(250, function() {
                    $("#mbr" + tbid).css("display", "block")
                    .hide()
                    .fadeIn(250, function () {
                        $("#mbr" + tbid)
                    });
                });
            });

            $("#mid-box").on("mouseleave", "a.testbox", function() {

                var tbid = $(this).attr("id");

                $("#mbr" + tbid).fadeOut(250, function() {
                    $("#mbr" + tbid).css("display", "none");
                    $("#mid-box-right").fadeIn(250);
                });
            });
        });
    });
    return false;
})

该功能的工作原理是允许用户从 Logo block 中的一系列 Logo 中进行选择，然后在 Logo 旁边显示特定的 div 内容。然后，用户将鼠标悬停在该 div 内容上，隐藏的 div 就会淡入 Logo block 的顶部。当他们离开 div 时，隐藏的 div 会淡出， Logo block 会重新出现。

我遇到的问题是，当用户太快地将鼠标移出和移入 a.testbox 区域时，两个动画似乎发生冲突，导致隐藏的 div 内容和 Logo block 同时出现时间。

如果用户“太快”地将鼠标移出和移入相关 div，是否有任何方法可以防止触发过渡动画，或者也许有其他方法可以防止我看到的这种重叠？

Answer 1

您可以使用 is(':animated') 检查要设置动画的元素，以查看其当前是否正在设置动画。如果检查返回 false，您需要触发动画。