Jquery Issue 创建闪烁的文本和图像

Question

我正在使用jquery，以便每次用户将鼠标悬停在缩略图/视频上时，文本都会淡入。如果用户将鼠标悬停在项目上缓慢，效果会正常工作，文本会在图像上淡入淡出。但是，如果用户在多个图像上快速移动屏幕上的光标，则文本将在网站的标题中闪烁，而不是在图像内闪烁。

这是网站的链接： https://sulemankhalid.com/home.html

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>

Jquery的例子：

$("#animation h2").hide();
$("#animation p").hide();
$("#animation").hover(function(){
$("#animation h2").fadeIn(400);
$("#animation p").fadeIn(400);
$("#animation video").fadeTo("slow", 0.1);
}, function(){
$("#animation h2").fadeOut(400);
$("#animation p").fadeOut(400);
$("#animation video").fadeTo("slow", 1);
});

将不胜感激任何帮助

Answer 1

如果您前往 jQuery 文档进行悬停 (https://api.jquery.com/hover/(，您将在第一个演示中看到它们与您页面上的"缺陷"相同。这实际上不是一个缺陷，这是jQuery的一个特征。您要做的是在开始下一个动画之前停止正在运行的动画。请参阅 https://api.jquery.com/stop/

Answer 2

您缺少绝对定位信息的父级的相对位置。

在.cell的 CSS 定义中，添加如下position: relative;：

.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;
}

作为参考，这里是 CSS 定义.info

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