为鼠标移出功能添加延迟答案

【问题标题】：Adding delay to mouse out function为鼠标移出功能添加延迟
【发布时间】：2010-05-10 19:51:07
【问题描述】：

我有一个下拉菜单，

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

我正在使用以下 JS 来使用悬停并显示子菜单。

我想给鼠标移出功能添加延迟（当LI的类被移除时）大约500ms，

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

请在这做必要的事。

提前致谢

【问题讨论】：

Delay jquery hover event? 的可能重复项

标签： javascript jquery html

【解决方案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));
});

当悬停在它上面时会清除任何超时（如果你悬停，离开，悬停，你需要检查这个）并在离开悬停时设置一个 500 毫秒的延迟，使用 .data() 将超时 ID 存储在 li 本身上。

【讨论】：

【解决方案2】：

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

【讨论】：