jqueryissue创建闪烁的文本和图像

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

以下是网站链接: https://sulemankhalid.com/home.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);
        });

如果有任何帮助,我将不胜感激