jquery - Jquery 幻灯片动画行为

Question

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

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

除了不需要的副作用外，一切都在工作。如果效果堆叠 - 所以每个 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);
            }
    });
});