ホバー上のクロスブラウザのアニメーションGIF＆リバースマウスが

Question

を離れたとき、私は以下の画像があります

Static Imageを| Starting Animation | Ending Animation

そして、私は、次のコード（jsfiddle example）を使用しています：

は

$(function() { 
 
    $("#link-gif").hover(
 
     function() { 
 
      /* starting animation */ 
 
      $(this).css("background-image", "url('http://i.imgur.com/HhsBws5.gif')"); 
 
     }, 
 
     function() { 
 
      /* ending animation */ 
 
      $(this).css("background-image", "url('http://i.imgur.com/WLFzz3S.gif')"); 
 
     }       
 
    );     
 
});

#link-gif { 
 
    width:150px; 
 
    height:40px; 
 
    border:1px solid #39464E; 
 
    background-image:url('http://i.imgur.com/YgLJoVH.png'); /*static*/ 
 
    background-size:contain; 
 
    background-repeat:no-repeat; 
 
    background-position:bottom center; 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="link"> 
 
    <div id="link-gif">&nbsp;</div> 
 
</div>

ので要約すると、私が起こるたいのです：私は最初の静止画像をロードします。ホバーが#link-gifの上に置かれると、開始アニメーションgifが開始され、そのホバーを離すと終了アニメーションが開始されます。

何らかの理由で、画像の上にマウスを移動すると画像がアニメーション化されません。それはちょうどgifの終わりに行く。誰がなぜこれが起こっているのか知っていますか？

Answer 1

これはイメージがキャッシュされているために発生します。時間のようにgif​​の最後に動的な値を追加してみてください。あなたのコードで行った変更を確認してください。 imgパスに現在の時刻を追加しました。

$(function() { 
 
    $("#link-gif").hover(
 
     function() { 
 
      /* starting animation */ 
 
      var url = "url('http://i.imgur.com/HhsBws5.gif?time=" + new Date().getTime() + "')"; 
 
      $(this).css("background-image", url); 
 
     }, 
 
     function() { 
 
      /* ending animation */ 
 
      var url = "url('http://i.imgur.com/WLFzz3S.gif?time=" + new Date().getTime() + "')"; 
 
console.log(url); 
 
      $(this).css("background-image", url); 
 
     }       
 
    );     
 
});

#link-gif { 
 
    width:150px; 
 
    height:40px; 
 
    border:1px solid #39464E; 
 
    background-image:url('http://i.imgur.com/YgLJoVH.png'); /*static*/ 
 
    background-size:contain; 
 
    background-repeat:no-repeat; 
 
    background-position:bottom center; 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="link"> 
 
    <div id="link-gif">&nbsp;</div> 
 
</div>