添加延遲鼠標輸出功能

Question

我有一個下拉菜單，

<ul> 
<li><a>link 1</a> 
<ul><li><a>link 1</a></li></ul> 
</li> 
</ul> 

我使用以下JS使用懸停並顯示孩子的菜單。

我想延遲500ms左右加鼠標輸出功能（當類的LI的去除），

$('li').hover(function(){ 
    $(this).addClass('over'); 
    }, function(){ 
    $(this).removeClass('over'); 
    }); 

請在此做要緊的。

在此先感謝

Answer 1

你可以做這樣的事情：

$('li').hover(function(){ 
    var timer = $(this).data('timer'); 
    if(timer) clearTimeout(timer); 
    $(this).addClass('over'); 
}, function(){ 
    var li = $(this); 
    li.data('timer', setTimeout(function(){ li.removeClass('over'); }, 500)); 
}); 

這盤旋在它時清除任何超時（如果你懸停，離開，盤旋迴你需要檢查這個），並且在離開懸停時設置500ms延遲，使用.data()在li上存儲超時ID。

Answer 2

$('li').hover(function(){ 
    $(this).addClass('over'); 
    }, function(){ 
    setTimeout(function(){$(this).removeClass('over')}, 500); 
    });