Question

我有以下图片：

Static Image | Starting Animation | Ending Animation

我正在使用以下代码（jsfiddle example）：

＆＃13;

$(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')");
        }                         
    );                  
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

总而言之，我想要发生的是：我首先加载静态图像。当有人悬停在#link-gif上方时，开始动画gif开始，当你将其悬停时，结束动画开始。

出于某种原因，当您将鼠标悬停在图像上时，图像不会生成动画。它只是到了gif的结尾。有谁知道为什么会发生这种情况？

Answer 1

这是因为图像被缓存了。尝试在gif的末尾添加一些动态值，就像时间一样。检查我在您的代码中所做的修改。我在img路径添加了当前时间。

＆＃13;

$(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 );
        }                         
    );                  
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

悬停时的跨浏览器动画gif＆amp;鼠标离开时反转

1 个答案: