快速Mouseenter / Mouseleave搞砸了动画

Question

另一个快速鼠标悬停动画问题。

我有3个可悬浮的div，在悬停时返回html（）文本 - HTML：

<div id="hoverableDivs_container" class="hoverableDiv">
    <div id="hoverableDiv1" class="hoverableDiv"><p>Hoverable<br>div 1</p></div>
    <div id="hoverableDiv2" class="hoverableDiv"><p>Hoverable<br>div 2</p></div>
    <div id="hoverableDiv3" class="hoverableDiv"><p>Hoverable<br>div 3</p></div>
</div>

<div id="infoBox">
    <p>InfoBOX</p>
    <div id="infoBox_inactive"></div>
    <div id="infoBox_active"></div>
</div>

FIDDLE

如果我：

• 快速的鼠标中心/ mouseleave可感知的div，它会搞得一团糟。
• 从一个div徘徊到另一个div，它搞得一团糟

我已经以各种可想象的方式尝试了 stop（），但无法让它正常工作（我现在删除了stop（））。

它唯一有效的方法是在相同的div（进出和进入）中缓慢地进入mouseenter / mouseleave。

请帮助。

佩德罗

Answer 1

在每个animate方法之前使用.stop()方法。如果在元素上调用它，则会立即停止当前运行的动画（如果有）。

请在此处查看工作Fiddle。

要获得更好的优化代码，请尝试删除.stop()，然后查看它被搞砸的地方并离开所需的位置。为了方便起见，我在动画方法之前添加了.stop。