Cross-Browser animierte gif auf schweben und umkehren, wenn Maus

Question

verlässt ich die folgenden Bilder haben:

Static Image | Starting Animation | Ending Animation

Und ich bin mit dem folgenden Code (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>

Also zusammenfassend, was ich will geschehen ist: ich zuerst das statische Bild laden. Wenn jemand den Mauszeiger über die #link-gif bewegt, startet das Start-Animations-GIF, und wenn Sie den Mauszeiger darüber bewegen, beginnt die Endanimation.

Wenn Sie den Mauszeiger über das Bild bewegen, wird das Bild aus irgendeinem Grund nicht animiert. Es geht nur bis zum Ende des Gifs. Weiß jemand, warum das passieren würde?

Answer 1

Dies geschieht, weil das Bild zwischengespeichert wird. Fügen Sie am Ende des Gifs einen dynamischen Wert hinzu, wie die Zeit. Überprüfen Sie die Änderungen, die ich an Ihrem Code vorgenommen habe. Ich habe die aktuelle Zeit im IMG-Pfad hinzugefügt.

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