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

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的结尾。有谁知道为什么会发生这种情况？

来源

2016-03-01 bryan

你真的无法控制在任何浏览器GIF动画。 – adeneo

@adeneo嗯，我只是试图成功显示悬停的动画GIF。我的意思是任何事情都有可能吧;） – bryan

完美地适合我 – Turnip

发生这种情况是因为图像被缓存。尝试在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>

来源

2016-03-16 14:47:36

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

回答

相关问题