ホバーの後に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

あなたはjsでrepeatまたはresetgifようimgを制御することはできませんが、あなたはtrickを行うことができます。

まずあなたはこのgifが前のではないブラウザを伝えるためにgif、URLのrandom文字列の末尾に追加する必要があり、すべてのstyles

セカンドjsにあなたが移動する必要があります。

$(".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>

Answer 2

わずか2 DOMの書き込みの間にDOM読み込みコマンドを追加します。たとえば：

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