jQuery .stop()不起作用 [英] jquery .stop() not working

问题描述

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

I'm trying to build a menu where only the first item is shown by default, and when you hover over it the rest of the items slide out, and are hidden again when the mouse leaves. It's mostly working but if the mouse exits before it's finished sliding out then the hide function isn't called. I thought stop() was supposed to take care of this but it doesn't seem to have any affect.

$(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演示

有人可以看到我在做什么吗?

Can anybody see what I'm doing wrong?

推荐答案

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

I'm not the biggest animation genius, but I bet it has to do with the fact that you're rebuilding the jQuery object in each handler. Try this:

$(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在注释中指出，此特定设置的行为并不总是稳定的.如果小心地将鼠标移到主页" <li>的右边缘(在>"字符附近)，则有时动画效果会变差.尚不清楚原因，但浏览器对应该在何处呈现元素感到非常困惑.

edit — @melee points out in comments that the behavior of this particular setup is not always stable. If you carefully hold the mouse over towards the right edge of the "Home" <li> (near the ">" character), then sometimes the animation sort-of freaks out. It's not clear why, but the browser just gets very confused about where the elements should be rendered.

这篇关于jQuery .stop()不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！