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

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

在@Test(groups={"group1"}, priority=0) @Test(groups={"group2"}, dependsOnGroups="groupX", priority=1)的CSS定义中，像这样添加.cell：

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

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

2 个答案: