跨瀏覽器的動畫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在懸停和反轉時鼠標離開

回答

相關問題