当鼠标悬停时跨浏览器动画gif，当鼠标离开时反转。

Question

我有以下图片:

静态图像 | 开始动画 | 结束动画

我正在使用以下代码 (jsfiddle 示例):

$(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的末尾。有人知道为什么会发生这种情况吗？

- bryan

---

在任何浏览器中，您实际上无法控制动画gif。 - adeneo

@Turnip，一开始它对我完美地起作用，但是如果我回到jsfiddle，它就停止工作并继续执行动画的结尾。 - bryan

啊，是的。这段代码片段在JSFiddle上无法正常工作。 - Turnip

这就是缓存，它是否按照您想要的方式工作？-> https://jsfiddle.net/yL5hbzxq/6/ - adeneo

大多数浏览器存在一个问题，已经存在了将近20年，它可能已经变成了不再是bug而是“特性”，即在CSS中设置为背景的缓存动画gif在重新加载时不会重新启动，它们总是停留在动画的结尾。显然，这与大多数浏览器使用的动画框架的缓存干扰（服务器标头、HTTPS等）有关。由于除Ling之外没有人真正使用动画gif，因此这可能不是一个需要修复的问题。 - adeneo

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>

- Roumelis George