jquery延迟（）打破动画

Question

我有一个下拉菜单，运作非常好，但我希望它留下来下来，可以说，用户开箱后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("»"); 

}）;

Answer 1

您正在使用此延迟，因为它会是setTimeout。对于你在做什么，我会建议只使用setTimeout。

顺便说一句，你在500毫秒后隐藏它，因为用户可能想要返回它，是吗？如果是，则必须考虑取消隐藏功能，如果用户返回。对于这一点，记得使用

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

我全给你的建议的setTimeout的：

$(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("»"); 
});