当光标仍在元素上时，Jquery mouseout会触发

Question

提前感谢所有愿意提供帮助的人。我的谜语是jQuery中的mouseout效果 - 我正在尝试构建一个能够无限期地在容器内上下移动元素的函数。悬停时，移动应停止并保持停止，直到光标完全离开元素。但是，当鼠标悬停事件触发时，鼠标悬停事件会立即触发，当光标仍在元素上时，动画会中断。

这是简单的HTML：

<div id="container">
  <div class="element">Some text</div>
  <div class="element">Some other text</div>
  <div class="element">Some more text</div>
</div>

移动元素绝对由javascript定位在顶部元素上并向下和向上移动，这是jsfiddle上的示例

有没有其他人必须处理这件事？感谢

Answer 1

我认为您需要在动画功能之外拉出mouseenter和mouseout事件。每次调用animate函数时，都会向每个元素添加另一个鼠标事件。这导致它在您鼠标移出时多次调用您的动画功能。

这是一个fiddle，我添加了一个计数器来查看调用动画函数的次数。

var counter = 0;
function animate(el, dir) {
   $("#count").val(counter);
   counter++;

鼠标反复出现几次，你可以看到它每次鼠标移动时都会混合动画调用。