Question

我有一个下拉框，其操作如下：

$(document).on("mouseenter mouseleave", "#dropdown", function(event){

    if (event.type == 'mouseenter')
        $('#dropdown ul.children').slideDown(1000);
     else
        $('#dropdown ul.children').slideUp(1000);

    //stop();?
});

但是，如果您将鼠标移出并快速移动，那么您可以在另一个事件完成之前运行另一个事件，如何确保当前的事件在下一次启动之前完成？

如果我使用.stop()，那么可以将鼠标移开并将鼠标移开然后重新启动动画，它会从一开始就重新启动动画，让它看起来不稳定？

Answer 1

试试这个：

$(document).on("mouseenter mouseleave", "#dropdown", function(event){

    if (event.type == 'mouseenter')
        $('#dropdown ul.children').stop(true, true).slideDown(1000);
     else
        $('#dropdown ul.children').stop(true, true).slideUp(1000);

});

see jQuery .stop()

DEMO

Answer 2

您需要设置一个标志类，表示正在设置下拉列表。像这样的东西：

$(document).on("mouseenter mouseleave", "#dropdown", function(event){

    if (event.type == 'mouseenter')
    {
        $('#dropdown ul.children').addClass("animating");
        $('#dropdown ul.children').slideDown(1000);
        $('#dropdown ul.children').removeClass("animating");
    }
    else
    {
        if ($("#dropdown:not(.animating)")
        {
           $('#dropdown ul.children').slideUp(1000);
        }
         else
        {
           return false;
        }
    }
});

或类似的东西取决于你想为滑动边缘情况建立什么规则。

当与.on（）一起使用时，防止在jQuery mouseenter / leave中运行两次效果

2 个答案:

DEMO