添加延迟鼠标输出功能

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); 
    });