如何在mouseenter / mouseleave上多次停止触发切换事件？

我正在使用jQuery使用jQuery切换方法切换

的可见性。 在mouseenter和mouseleave事件上触发切换，从而创建div在mouseenter上折叠并在mouseleave上折叠的效果。 问题是，如果用户将鼠标拖过

几次然后离开

，div将会多次切换。 如果用户意外地在

中移动了鼠标指针，就会发生这种情况。 有谁知道如何避免这种行为？

感谢名单！

Answer 1

两件事情：

1. 如果您要同时使用mouseenter和mouseleave我建议使用hover()函数; 和

2. 使用触发动画时，习惯使用stop()方法是个好习惯。

所以：

 $("div.someclass").hover(function() { $("...").stop().fadeIn("slow"); }, function() { $("...").stop().fadeOut("slow"); }); 

注意：用适当的选择器替换"..."以切换你正在切换的内容并使用适当的效果（我在这里使用淡入淡出）。 此外， this在事件处理程序中引用事件的来源。

Answer 2

您可以使用更常见的mouseover / mouseout事件来获取不会在内部鼠标移动时触发的hover事件。

但是不要在鼠标事件上使用toggle ，如果例如，它很容易出错。 鼠标在页面加载时在元素上，或者鼠标离开浏览器（这可以允许鼠标离开元素的边界而不触发mouseout ）。 具有单独的function，用于显示内容，并隐藏它。

更好：只使用hover()方法，这正是为了这个目的。

Answer 3

除了Cletus的正确答案之外，我想指出使用mouseenter和mouseleave事件并没有错。 诀窍只存在于stop()方法中，实际上我们仍然可以：

 $("div.someclass").on("mouseenter", function() { $("...").stop().fadeIn("slow"); }); $("div.someclass").on("mouseleave", function() { $("...").stop().fadeOut("slow"); }); 

这是一个jsFiddle示例:)