Question

我正在制作一个简单的幻灯片标签。

此脚本会导致div - ＆＃39;＃slideout＆＃39;鼠标悬停时滑入＆＃39;＃tabFeature1＆＃39;，并在mouseout上滑出。

除了不必要的副作用外，一切正常。如果效果堆栈 - 所以每个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);
            }
    });
});

Jquery幻灯片动画行为

1 个答案: