javascript - 将鼠标悬停在 javascript 列表项上时如何创建暂停或延迟？

Question

希望有人能帮忙。

我是一个 JavaScript 新手。我有一个姓名列表，当将鼠标悬停在上面时，会显示一个包含该人联系信息的框。

我遇到的问题是盒子显示得太快了；将鼠标悬停在多个名称上时，导致框快速启动。

链接： http: //law.nd.edu/faculty/

这是我认为相关的代码：

<script>
jQuery(".directory-list li").hover(
function() {
  jQuery(this).find(".directory-info").fadeIn(200); ;
},
function() {
  jQuery(this).find(".directory-info").fadeOut(50);;
}
);
</script>

谢谢你的帮助。

Answer 1

改用 hoverIntent。

有一个不错的小插件，这是最简单的方法。

http://cherne.net/brian/resources/jquery.hoverIntent.html

它将防止您的元素快速射击。

Answer 2

您可以使用 setTimeout引入延迟，如下所示：

var hoverTimer;
jQuery(".directory-list li").hover(function() {
  var elem = jQuery(this).find(".directory-info");
  hoverTimer = setTimeout(function() {
    elem.fadeIn(200);
  }, 1000); // wait for one second and then fadeIn
},
function() {
  clearTimeout(hoverTimer);
  jQuery(this).find(".directory-info").fadeOut(50);
});

Answer 3

最简单的方法是在淡入之前添加延迟：

jQuery(this).find(".directory-info").delay(300).fadeIn(200);

Answer 4

看看这个小提琴，认为这就是你想要的。使用超时的另一个答案将失去函数this内部的上下文setTimeout()并且不起作用。

http://jsfiddle.net/RZUVS/1/。