jquery .stop() 不工作答案

【问题标题】：jquery .stop() not workingjquery .stop() 不工作
【发布时间】：2011-07-21 09:13:33
【问题描述】：

我正在尝试构建一个菜单，其中默认情况下仅显示第一项，当您将鼠标悬停在其上时，其余项目滑出，并在鼠标离开时再次隐藏。它大部分都在工作，但如果鼠标在滑出完成之前退出，则不会调用隐藏函数。我以为stop() 应该会解决这个问题，但它似乎没有任何影响。

$(function(){
    $("#menubar").children(".breadcrumbs").children("li + li").hide();

    $("#menubar .breadcrumbs").hover(function() {
        $(this).children("li + li").stop().show("slide", {}, 'slow');
    }, function() {
        $(this).children("li + li").stop().hide("slide", {}, 'slow');
    });
});

jsFiddle demo

谁能看出我做错了什么？

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

我不是最大的动画天才，但我敢打赌这与您在每个处理程序中重建 jQuery 对象这一事实有关。试试这个：

$(function(){
    var children = $('#menubar .breadcrumbs').children('li + li');
    children.hide();

    $("#menubar .breadcrumbs").hover(function() {
        children.stop().show("slide", {}, 'slow');
    }, function() {
        children.stop().hide("slide", {}, 'slow');
    });
});

edit — @melee 在 cmets 中指出，这种特定设置的行为并不总是稳定的。如果您小心地将鼠标悬停在“Home”<li> 的右边缘（靠近“>”字符），那么有时动画会出现异常。目前尚不清楚为什么，但浏览器只是对应该在哪里呈现元素感到非常困惑。

【讨论】：

不确定这是特定于 jsFiddle 还是 Firefox，但是当您将鼠标悬停在 Home > 胡萝卜上时，它会变得很疯狂。
也发生在 Chrome 上，但我无法重现。我认为这是幻灯片 ani 的问题 - 我也在 FF4 中对其进行了测试 :)
我认为它的发生是因为在那个特定的点上，当 li 滑入时，你的鼠标会越过这些元素，所以当它们通过时它会重新触发 slide 事件，从而导致循环。我认为您需要合并一些回调和变量才能使其完美运行。
我遇到了类似的问题，这对我有用。不过，我想知道为什么；通常使用$("#stuff").hide(200); $("#stuff").stop(); 应该没有问题，但是如果你使用children()，jQuery 显然会忘记设置。

【解决方案2】：

STOP()、函数、(true,true)、(false,false)有参数，你试过改变这些来改变想要的效果吗？

【讨论】：

我尝试了不同的组合，但似乎没有任何区别。

【解决方案3】：

停止函数的定义是

.stop( [ clearQueue ], [ jumpToEnd ] )

官网去了……

clearQueue：一个布尔值，指示是否也可以删除排队的动画。默认为 false。

jumpToEnd：一个布尔值，指示是否完成当前动画立即地。默认为 false。

这是来自http://api.jquery.com/stop/

【讨论】：