Farhad Farhad - 5 months ago 17
HTML Question

play/pause gif with mouse event

I have an image format gif, in my web page.

I want to go with the mouse on any image to run animations. And as long as the mouse is still there, it stays on the last frame and When the mouse stepped back into the original image.

can someone help?

Answer

Something like that:

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

Comments