पार ब्राउज़र हॉवर पर एनिमेटेड 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 के अंत में कुछ गतिशील मान जोड़ने का प्रयास करें। मैंने आपके कोड में किए गए संशोधनों की जांच करें। मैंने आईएमजी पथ पर वर्तमान समय जोड़ा।

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