jquery delay() 破坏动画

发布于 2024-10-15 17:04:37 字数 481 浏览 3 评论 0原文

我有一个下拉菜单，效果非常好，但我希望它在用户将鼠标悬停在框外后保持下拉状态 500 毫秒。

我尝试使用 .delay(500) 但动画似乎卡住了，菜单也没有消失。

这是我的代码。

$(function(){
$("ul.dropdown li ul").hide(0);
$("ul.dropdown li").hover(function(){
    $(this).addClass("hover");
    $('ul:first',this).show(0);
}, function(){
    $(this).removeClass("hover");
    $('ul:first',this).delay(500).hide(0);
});
$("ul.dropdown li ul li:has(ul)").find("a:first").append("&raquo;");

});

原文

I have a drop down menu that works really well but I want it to stay dropped down so to speak for 500ms after user hovers out of the box.

I tried to use .delay(500) but the animation seems to get stuck and the menu doesn't disappear.

Here's my code.

$(function(){
$("ul.dropdown li ul").hide(0);
$("ul.dropdown li").hover(function(){
    $(this).addClass("hover");
    $('ul:first',this).show(0);
}, function(){
    $(this).removeClass("hover");
    $('ul:first',this).delay(500).hide(0);
});
$("ul.dropdown li ul li:has(ul)").find("a:first").append("»");

});

分享到QQ

分享到微博

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

发布评论

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

巴黎夜雨 2024-10-22 17:04:37

您正在使用此延迟，因为它将是 setTimeout。对于你正在做的事情，我建议只使用 setTimeout。

顺便说一句，您在 500 毫秒后隐藏它，因为用户可能想返回它，不是吗？如果是的话，你必须考虑一下，如果用户返回它，取消隐藏功能。为此，请记住 setTimeout 使用

var myTimeOut = setTimeout(function, 500); clearTimeout(myTimeOut);

我给您的完整建议：

$(function(){
var myTimeout = null;
$("ul.dropdown li ul").hide(0);
$("ul.dropdown li").hover(function(){
    if (myTimeout) clearTimeout(myTimeout);
    $(this).addClass("hover");
    $('ul:first',this).show(0);
}, function(){
     var _thisRef = $(this);
     _thisRef.removeClass("hover");
     myTimeout = setTimeout(function() {
        _thisRef.find("ul:first").hide();
    }, 500);
});

$("ul.dropdown li ul li:has(ul)").find("a:first").append("»");
});

You are using this delay as it would be setTimeout. For what you are doing, i would suggest just to use setTimeout.

By the way, you are hiding it after 500 ms because the user might want to return to it, arent you? If yes, you have to think about, to cancel the hiding function, if the user returns to it. For this, remember the setTimeout using

var myTimeOut = setTimeout(function, 500); clearTimeout(myTimeOut);

My full suggestion to you:

$(function(){
var myTimeout = null;
$("ul.dropdown li ul").hide(0);
$("ul.dropdown li").hover(function(){
    if (myTimeout) clearTimeout(myTimeout);
    $(this).addClass("hover");
    $('ul:first',this).show(0);
}, function(){
     var _thisRef = $(this);
     _thisRef.removeClass("hover");
     myTimeout = setTimeout(function() {
        _thisRef.find("ul:first").hide();
    }, 500);
});

$("ul.dropdown li ul li:has(ul)").find("a:first").append("»");
});

回复收藏 0 原文

~没有更多了~