jquery .stop()不工作

Question

我正在尝试构建一个菜单,其中默认情况下只显示第一个项目,当您将鼠标悬停在其上时,其余项目会滑出,并在鼠标离开时再次隐藏.它主要工作,但如果鼠标在完成滑出之前退出,则不会调用hide函数.我以为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演示

谁能看到我做错了什么？

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

编辑 - @melee在评论中指出这个特定设置的行为并不总是稳定的.如果你小心地将鼠标移到"Home"的右边缘<li>(靠近">"字符),那么有时动画就会变得怪异.目前尚不清楚为什么,但浏览器对于应该呈现元素的位置感到非常困惑.