Javascript Jquery问题创建闪烁的文本和图像

我正在使用jquery，这样每当用户将鼠标悬停在缩略图/视频上时，文本就会淡入淡出。如果用户缓慢地将鼠标悬停在项目上，效果会很好，文本会在图像上淡入淡出。但是，如果用户在多个图像上快速地在屏幕上移动光标，则文本将在网站标题中而不是在图像中闪烁

以下是该网站的链接：

HTML示例：

  <a href="animation.html">
        <div class="cell" id="animation">
          <div id="video-container" style="z-index: -1;">
            <video autoplay loop muted style="width: 100%; height:100%;">
              <source id="mp4" src="https://sulemankhalid.com/thumbnails/animation.mp4" type="video/mp4">
            </video>
          </div>
          <div class="info">
            <h2>Animation &</h2>
            <h2>Motion Graphics</h2>
            <p>Shion Uino left Sushi Saito, a restaurant many consider to be one of the best in the world, to chart his own path in New York.</p>
          </div>
        </div>
      </a>

---

非常感谢您的帮助

您在父项上缺少绝对定位信息的相对定位

在

.cell

的CSS定义中，添加

位置：相对像这样：

.cell {
    background-color: #23384b;
    background-size: 100%;
    float: left;
    width: 325px;
    height: 325px;
    margin: 1.72%;
    transition: 0.4s;
    overflow: visible;
    cursor: pointer;
    position: relative;
}

以下是
.info

.info {
    padding: 20px;
    position: absolute;
    top: 80px;
    left: 0px;
    text-align: right;
    font-family: Roboto;
    color: white;
}

如果您转到jquerydoc for hover（），您将在第一个演示中看到它们与页面上的“缺陷”相同。这实际上不是一个缺陷，而是jQuery的一个特征。您需要做的是在开始下一个动画之前停止正在运行的动画。请参见
不要使用javascript实现这些效果，研究css3转换可能会对您有所帮助。这就解决了问题！梅拉克·马雷的答案解决了闪烁问题，特德的答案解决了替换文本问题。所以，也许投票表决我们的答案不会有什么坏处。。？
.info {
    padding: 20px;
    position: absolute;
    top: 80px;
    left: 0px;
    text-align: right;
    font-family: Roboto;
    color: white;
}