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

最简单的方法是在你的fadeIn：

之前加一个延迟

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

Answer 4

看看这个小提琴，认为这就是你想要的。使用timeoutes的另一个答案将会松开this函数内setTimeout()的上下文，并且无效。

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

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

4 个答案: