如何製作GIF動畫懸停，回到正常後unhovered

所以我有一堆喜歡的元素：如何製作GIF動畫懸停，回到正常後unhovered

<div class="hover-icon one"> 
    <img class="original" src="sswe-images/Circle_Customer Notifications.png"/> 
    <img class="hovered one" src="sswe-images/Customer-Notifications.gif" /> 
</div> 
<div class="hover-icon two"> 
    <img class="original" src="sswe-images/Circle_Field Service Tools.png" /> 
    <img class="hovered" src="sswe-images/Field-Service-Tools.gif" /> 
</div> 
<div class="hover-icon three"> 
    <img class="original" src="sswe-images/Circle_Remote Connectivity.png" /> 
    <img class="hovered" src="sswe-images/Remote-Connectivity.gif" /> 
</div>

其中.original是佔位符和.hovered是我想動畫上的GIF懸停，然後在鼠標離開後回到正常狀態。我的嘗試是：

$('div.hover-icon').hover(function(){ 
    var orig = $(this).find('.original'); 
    orig.hide(); 
    var hov = $(this).find('.hovered'); 
    hov.attr('src', hov.attr('src') + "?x=" + Math.random()); 
    setTimeout(function(){ hov.show(); }, 100);   
    /* $(this).mouseleave(function(){ 
     hov.hide(); 
     orig.show(); 
    });*/ 
});

但是註釋掉部分的原因是因爲它不工作。它引起各種瘋狂。我應該在這裏使用什麼樣的正確模式？

來源

2016-04-21 Subpar Web Dev

如果你想支持CSS3，可能有更簡潔的方法來做到這一點。谷歌搜索「css gif動畫開始停止」顯示了很多可能性。 – lurker

最簡單的解決方案是有一個簡單的圖像，並用懸停時的GIF圖像替換它。 – NLV

試試這個http://stackoverflow.com/questions/7473117/animating-a-gif-on-hover – Chris

基本的HTML結構是正確的。只使用CSS，但像這樣codepen http://codepen.io/ryanpcmcquen/pen/gGqdI確實

.hover-icon { 
    position: relative; 
    margin: 0 auto; 
} 

.hover-icon img { 
    position: absolute; 
} 

.hover-icon img.original:hover { 
    opacity: 0; 
}

來源

2016-04-21 20:56:56 lipp

這是不同的，因爲這些是動畫gifs –

區別在哪裏？難道圖像只是gif？像這樣http://codepen.io/lipp/pen/dMjXRK – lipp

如何製作GIF動畫懸停，回到正常後unhovered

回答

相關問題