javascript - 如何在悬停后重置 CSS 背景 GIF

Question

我想用文本创建一个纹理动画，但我不知道如何重新加载 CSS 背景 GIF，以便再次悬停时动画再次开始。 有人有想法用一些 JavaScript/jQuery 来做到这一点吗？我到处都找不到。

它试过了，但它不会重置背景:

$(document).ready(function() {
  $(".hoverClass").mouseleave(function() {
    $(this).removeClass("hoverClass");
    setTimeout(function() {
      $(this).addClass("hoverClass");
    });
  });
});

.navMenu2 li {
  color: #0e0e0e;
  font-size: 10rem;
  font-weight: 600;
  list-style-type: none;
  transition: background-image 2s ease-in-out;
}

.navMenu2 a {
  text-decoration: none;
  color: #0e0e0e;
}

.hoverClass:hover,
.hoverClass:focus {
  -webkit-text-fill-color: transparent;
  background: -webkit-linear-gradient(transparent, transparent), url(https://media.giphy.com/media/l2QDSTa6UcsRRSM5a/giphy.gif) repeat;
  background: linear-gradient(transparent, transparent), url(https://media.giphy.com/media/l2QDSTa6UcsRRSM5a/giphy.gif) repeat;
  -webkit-background-clip: text;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navMenu2">
  <ul>
    <li class="liHver hoverClass">
      <a href="index.html">
        <span class="jap">作業</span>
        <br>werk</a>
    </li>
  </ul>
</div>

JSFiddle

Answer 1

你不能控制 repeat 或 reset img like gif with js 但你可以做一个技巧。

首先您应该将所有样式移动到js

第二 你应该在 gif url 的末尾添加一个 random 字符串来告诉浏览器这个 gif 不是'不是上一个。

$(".navMenu2 li").mouseover(function() {
  var n = Date.now();
  // or   var n = Math.random();
  $(this).css({
    background: "linear-gradient(transparent, transparent), url(http://gifmaker.org/download/20171105-21-n9B1fxNwBctBCeMo/GIFMaker.org_ptEtRM.gif?ver=" + n + ") repeat",
    webkitTextFillColor: 'transparent',
    webkitBackgroundClip: 'text'
  });
});

$(".navMenu2 li").mouseleave(function() {
  $(this).css({
    background: "",
    webkitTextFillColor: '',
    webkitBackgroundClip: ''
  });
});

.navMenu2 li {
  color: #0e0e0e;
  font-size: 10rem;
  font-weight: 600;
  list-style-type: none;
  transition: background-image 2s ease;
}

.navMenu2 a {
  text-decoration: none;
  color: #0e0e0e;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navMenu2">
  <ul>
    <li class="liHver"><a href="index.html"><span class="jap">作業</span><br>werk</a></li>
  </ul>
</div>