jquery - 与 .on() 一起使用时，防止效果在 jQuery mouseenter/leave 中运行两次

Question

我有一个下拉框，可以使用以下内容：

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

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

    //stop();?
});

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

如果我使用.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);

});

见 jQuery.stop()

演示

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;
        }
    }
});

或类似的东西，具体取决于您要为滑动边缘情况建立的规则。