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