快速 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.

如果我：

• 快速 mouseenter/mouseleave 可悬停的 div 会变得一团糟。
• 从一个 div 悬停到另一个它会变得一团糟

我已经尝试了 stop() 以各种可以想象的方式，但无法使其正常工作（我暂时删除了 stop()）。

它唯一起作用的方法是在同一个 div 中（进出再进）缓慢地进行 mouseenter/mouseleave。

请帮忙。

佩德罗

Answer 1

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

在此处查看Fiddle 的作品。

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