Javascript 在div上悬停时重复动画

我已经阅读了关于这个问题的其他问题和答案，但它们对我不起作用，也许我遗漏了什么，或者我的例子有点不同，我不知道。无论如何，我有一个div，里面有一些文本和链接，我想在用户悬停在第一个div上时创建一个新div。问题是，当我在第一个div上时，第二个div会不断地淡入淡出，即使我没有用鼠标离开第一个div

以下是HTML代码：

<div id="content">
    <h1>Portfolio</h1>
        <div id="web">
            <p>Web apps</p>
            <a href="#">
                First link
            </a>
        </div>
        <div id="commentweb">
            <p>The text that I want to show</p>
        </div>
</div>

我应该怎么做才能在我结束web时启动淡入动画，在我离开该div时启动淡出动画，而不闪烁（即持续的淡入和淡出）

我添加了一把小提琴来向您展示问题：

---

这基本上是在我将鼠标悬停在文本上时发生的。

发生此问题的原因是您的注释div位于分配悬停事件的div内。请注意，当您在下图（与注释div相关）所示的高亮显示区域（红色）中输入鼠标指针时，会出现flickring

看看这个解决方案：

---

注释div现在有了一个绝对位置。当鼠标进入时，注释div将显示在指针旁边。当然，现在您需要更改代码以满足您的需要。另一种方法是设置一个包含#web div的div容器，并在其旁边放置另一个div，将其设置为float。在新的div中插入带有注释的div。

使用jquery

.mouseenter（）

和

.mouseleave（）

来避免这种情况。 这样，您就不必重新定位css中的任何内容

有关更多详细信息，请参见我的答案

我的另一个回答有点太夸张了，你只需要让你的另一个div浮动

#commentweb {float:left}

它需要是异步的，stop（）是导致它闪烁的原因，但是如果您只是在分配事件处理程序之前等待淡入淡出完成，则不需要停止

---

哎呀。你肯定有很多

$（这个）

。为什么不

var$self=$（this）

然后使用

$self

？也可以使用

$self.css（{cursor:'pointer'，border:'…'，…}）

。@JaredFarrish-或者只是将所有这些方法链接到一个选择器表达式？谢谢大家，我将链接css命令。@adeneo-我不知道它们都可以链接。在我看来，为了链接的缘故，在必要的地方使用本地链接和一些链接要比使用非表达链接好@user1301428我看不到你提到的闪烁。我也尝试过，但问题仍然存在。您可以在这里看到更新后的fiddle：您发布的内容有效，但我不明白您为什么必须更改jQuery代码，您能解释一下吗？@user1301428：我更改它只是为了使用鼠标指针坐标重新定位注释div。您也可以使用

left

和

top

属性更改css中的

.comment

类，将其位置设置为静态值。谢谢，但您能否告诉我，如果在您的示例中粘贴我的jQuery代码，为什么它不起作用？只有在我留下jQuery代码的情况下，注释div才有效。此外，注释div不在我分配悬停事件的div中，#commentweb是#web的兄弟，正如您在回答的开头所说。你的意思是问题在于它们都在#content div内吗？@user1301428:它不起作用，因为它需要更改。我的代码是经过一些修改的代码。

#commentweb {float:left}