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 gif与js，但您可以trick。

首先您应该将所有styles移至js

第二次您应该在random网址末尾添加gif字符串，告诉浏览器此gif不是前一个。

＆＃13;

$(".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: ''
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

只需在两个DOM写入之间添加DOM读取命令。例如：

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

如何在悬停

2 个答案: