爲這條jQuery添加MouseOut延遲（菜單導航）

Question

我是一個完全絕對的jQuery noob。我一直在關注一個教程，向我的網站添加一個CSS/jQuery導航菜單，並且我能夠正常工作。我希望看到的唯一一件事是鼠標移出一小段時間，因爲下拉菜單正在立即消失當你將鼠標移出時會讓菜單有點煩人。以下是我的腳本：

function mainmenu(){ 
$(" .top-menu ul ").css({display: "none"}); // Opera Fix 
$(" .top-menu li").hover(function(){ 
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400); 
    },function(){ 
    $(this).find('ul:first').css({visibility: "hidden"}); 
    }); 
} 

$(document).ready(function(){ 
mainmenu(); 
}); 

是否有人願意將所需的代碼添加到此腳本中。我會答應來研究你是怎麼做到的，所以其實我從中學到;-D

Answer 1

你可以做這樣的事情，給它一個500ms的延遲：

function mainmenu(){ 
    $(".top-menu ul ").hide(); 
    $(".top-menu li").hover(function() { 
    clearTimeout($.data(this, 'timeout')); 
    $(this).find('ul:first').show(400); 
    }, function() { 
    $.data(this, 'timeout', setTimeout($.proxy(function() { 
     $(this).find('ul:first').hide(); 
    }, this), 500)); 
    }); 
} 
$(mainmenu); 

這增加了500毫秒延遲通過setTimeout()和只存儲定時器ID與元素使用$.data()，當懸停在元素，它會清除超時，並將不會再運行，直到你超出了......所以你必須離開元素爲500毫秒爲它隱藏。

或者，做一些與hoverIntent plugin非常相似的東西，這就是這個問題。

Answer 2

$(" .top-menu li").hover(function(){ 
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400); 
},function(){ 

    // Note here... 
    setTimeout(function(){ 
     $(this).find('ul:first').css({visibility: "hidden"}); 
    }, 2000); 
    // 2000 is a delay time in milliseconds, change it 

});