如何为jquery mouseover添加延迟？

我在一个页面上有一堆图像，我使用以下内容来触发事件：

$('.img').on('mouseover', function() { //do something }); 

有没有办法添加一个延迟，如果用户徘徊可能1秒钟，那么它会“//做某事”或实际触发“鼠标hover”事件？

Answer 1

您可以使用setTimeout

 var delay=1000, setTimeoutConst; $('.img').on('hover', function() { setTimeoutConst = setTimeout(function() { // do something }, delay); }, function() { clearTimeout(setTimeoutConst); }); 

Answer 2

如果用户离开太快，你可以使用setTimeout和clearTimeout来做到这一点：

 var timer; var delay = 1000; $('#element').hover(function() { // on mouse in, start a timeout timer = setTimeout(function() { // do your stuff here }, delay); }, function() { // on mouse out, cancel the timer clearTimeout(timer); }); 

Answer 3

使用计时器并在鼠标停留时清除它们，并在1000毫秒内离开

 var timer; $('.img').on({ 'mouseover': function () { timer = setTimeout(function () { // do stuff }, 1000); }, 'mouseout' : function () { clearTimeout(timer); } }); 

Answer 4

我也在寻找这样的东西，但也有次要的延迟。 我在这里采取了其中一个答案并对其进行了扩展

此示例显示鼠标hoverX秒后的div，并在鼠标输出X秒后隐藏它。 但如果将鼠标hover在显示的div上，则禁用。

   
 Hello, hover over me foo text  
  

工作实例

Answer 5

您可以像这样使用jquery .Delay（未经测试）：

 $("#test").hover( function() { $(this).delay(800).fadeIn(); } ); 

http://api.jquery.com/delay/