2

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

我有 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>

小提琴。

如果我：

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

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

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

请帮忙。

佩德罗

4

1 回答 1

1

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

在这里查看工作小提琴。

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

于 2013-05-31T09:41:37.440 回答