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;
})

该功能的工作原理是允许用户从徽标块中选择一系列徽标，然后在徽标旁边显示特定的div内容。然后用户将鼠标悬停在该div内容上，隐藏的div在徽标块的顶部淡入。当他们离开div时，隐藏的div会消失，徽标会阻塞。

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

有没有办法阻止过渡动画触发，如果用户将鼠标移出并进入相关的div“过于夸张”，或者可能是另一种阻止我看到这种重叠的方式？

Answer 1

您可以对要设置动画的元素执行is(':animated')检查以查看其当前是否已设置动画。如果检查返回false，则需要触发动画。

如何防止mouseenter / mouseleave事件动画“交叉”？

1 个答案: