Cross-Browser animated gif on hover & reverse when mouse leaves

I have the following images:

Static Image | Starting Animation | Ending Animation

And I am using the following 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>

Answers


This happens because the image is cached. Try adding some dynamic value at the end of the gif, like the time. Check the modifications I made at your code. I added current time at the img path.

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

Need Your Help

Player html5 soundcloud

html5 flash soundcloud

I would like to change flash player SoundCloud to HTML5 player to my site in WordPress. The audios are add in pages.

Android - How to use new Storage Access Framework to copy files to external sd card

android android-external-storage storage-access-framework

I'm implementing a file browser feature in my app. I know how to gain persistent permission for the external sd card using the ACTION_OPEN_DOCUMENT_TREE intent and how to create folders and delete ...