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

Question

在此先感谢所有愿意提供帮助的人。我的谜语是 jQuery 中的鼠标移出效果 - 我正在尝试构建一个函数，该函数可以无限期地在容器内上下移动元素。悬停时，移动应该停止并保持停止，直到光标完全离开元素。但是，发生的情况是 mouseover 事件触发正常，但是 mouseleave 事件在光标仍在元素上方时立即触发，因此动画中断。

这是简单的 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 函数之外。每次调用 animate 函数时，都会向每个元素添加另一个鼠标事件。这会导致它在您鼠标移出时多次调用您的动画函数。

这是fiddle，我添加了一个计数器来查看调用了多少次 animate 函数。

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

鼠标来回移动几次，您可以看到每次鼠标移出时它都会复合动画调用。