如何制作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

回答

相关问题