用鼠標事件播放/暫停gif

Question

我的網頁中有一個圖像格式gif。

我想用鼠標去任何圖像上運行動畫。只要鼠標仍然存在，它就會停留在最後一幀，並且鼠標退回原始圖像。

有人可以幫忙嗎？

Answer 1

類似的東西：

HTML

<div id="images"> 
    <div class="img img1"> 
     <img data-gif_src="http://38.media.tumblr.com/tumblr_mdnaeqwmTr1rtuulro1_250.gif" src="http://i.dailymail.co.uk/i/pix/2011/12/25/article-2078552-0F44CB3D00000578-206_468x331.jpg"/> 
    </div>  
</div> 

CSS

#images .img { 
    width: 200px; 
    height: 150px;  
} 

#images .img img { 
    width: 200px; 
    height: auto;  
} 

JS

$('#images .img img').mouseenter(function(){ 
    $(this).data('img_src', $(this).attr('src')); 
    $(this).attr('src', $(this).data('gif_src')); 
}).mouseleave(function(){ 
    $(this).attr('src', $(this).data('img_src')); 
}); 

on jsfiddle