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

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

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

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