jquery .stop() 不工作

发布于 2024-10-25 22:25:59 字数 589 浏览 1 评论 0原文

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

有人能看到我做错了什么吗？

原文

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 demo

Can anybody see what I'm doing wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我乃一代侩神 2024-11-01 22:25:59

我不是最伟大的动画天才，但我敢打赌这与您在每个处理程序中重建 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”

的右边缘（靠近“>”字符），有时动画会出现异常。目前还不清楚为什么，但浏览器对于元素应该在哪里渲染感到非常困惑。

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 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.

回复收藏 0 原文

明月夜 2024-11-01 22:25:59

STOP() 函数有参数 (true,true), (false,false) 您是否尝试过更改这些参数以更改所需的效果？

回复收藏 0 原文

倾听心声的旋律 2024-11-01 22:25:59

停止功能的定义是

.stop( [ clearQueue ], [ jumpToEnd ] )

官方网站...

clearQueue：一个布尔值，指示是否
也可以删除排队的动画。
默认为 false。
jumpToEnd：一个布尔值，指示是否
完成当前动画
立即地。默认为 false。

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

The definition of the stop function is

.stop( [ clearQueue ], [ jumpToEnd ] )

The oficial site goes...

clearQueue: A Boolean indicating whether
to remove queued animation as well.
Defaults to false.
jumpToEnd: A Boolean indicating whether
to complete the current animation
immediately. Defaults to false.

This is from http://api.jquery.com/stop/

回复收藏 0 原文

~没有更多了~