jquery .stop()不工作

Question

我正在尝试构建一个菜单，其中默认情况下只显示第一项，当您将鼠标悬停在它上面时，其余的项将滑出，并在鼠标离开时再次隐藏。它大部分都在工作，但是如果鼠标在滑出之前就退出了，隐藏函数就不会被调用。我认为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

有没有人看到我做错了什么？

Answer 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在评论中指出，这种特定设置的行为并不总是稳定的。如果您小心地将鼠标悬停在"Home“<li>的右边缘(靠近">”字符)，则有时动画会出现异常。目前还不清楚原因，但浏览器只是对元素应该呈现在哪里感到非常困惑。

Answer 2

STOP()，function，(true，true)，(false，false)有一些参数，你有没有试过改变这些参数来改变你想要的效果？

Answer 3

stop函数的定义为

.stop( [ clearQueue ], [ jumpToEnd ] )

官方网站是..。

clearQueue:一个布尔值，指示是否也删除队列动画。默认为false。

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

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