鼠标离开时悬停和反转的跨浏览器动画 gif答案

【问题标题】：Cross-Browser animated gif on hover & reverse when mouse leaves鼠标离开时悬停和反转的跨浏览器动画 gif
【发布时间】：2016-06-14 11:14:16
【问题描述】：

我有以下图片：

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 的末尾。有谁知道为什么会这样？

【问题讨论】：

您无法在任何浏览器中真正控制 GIF 动画。
@Turnip 起初它对我来说很完美，但是如果我回到 jsfiddle，它就会停止工作并继续到动画结束。
啊，是的。 sn-p 工作正常，但在 JSFiddle 上却不行
这是给你的缓存，这是否如你所愿 -> jsfiddle.net/yL5hbzxq/6
在大多数浏览器中存在一个已经存在了近二十年的错误，它可能已经消失了，因为它不再是一个错误，而是一个“功能”，其中缓存的动画 gif 在 CSS 中设置为背景重新加载时不会重新启动，它们始终停留在动画的末尾。显然，它与大多数浏览器使用的动画框架的缓存干扰（服务器标头、HTTPS 等）有关。由于没有人真正使用动画 gif，期待Ling，这可能不是要解决的问题。

标签： javascript jquery html css animation

【解决方案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>

【讨论】：