Jquery 幻灯片动画行为

Question

我正在制作一个简单的滑出标签。

当鼠标悬停在“#tabFeature1”上时，此脚本会导致 div -“#slideout”滑入，并在鼠标滑出时滑出。

除了不想要的副作用外，一切正常。如果效果堆叠 - 所以每个 mouseover/mouseout 都是堆叠的。例如，如果用户快速将鼠标移入和移出 10 次，然后停止移动鼠标，动画将继续迭代 - 移入和移出 10 次。不理想的效果是动画不会堆叠。请让我知道这是否有意义。

$(document).ready(function () {
    $('#tabFeature1').mouseover(function () {
            $('#slideout').show("slide", { direction: "left" }, 1000);
        });

    $('#tabFeature1').mouseout(function () {
            $('#slideout').hide("slide", { direction: "left" }, 1000);
    });
});

Answer 1

使用.is(':animated')检查动画是否仍在进行中，如果前一个完成则应用动画。

$(document).ready(function () {
    $('#tabFeature1').mouseover(function () {
            if (!$('#slideout').is(':animated')) {
                $('#slideout').show("slide", { direction: "left" }, 1000);
            }
        });

    $('#tabFeature1').mouseout(function () {
            if (!$('#slideout').is(':animated')) {
                $('#slideout').hide("slide", { direction: "left" }, 1000);
            }
    });
});