2

目前我有以下脚本支持动态 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 会淡出，而 logo 会重新出现。

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

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

4

1 回答 1

1

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

于 2012-09-29T19:13:36.143 回答