gif starts playing on hover and stops when mouseout?

animated-gif, css, jquery, onhover

Solution

In your case, cause animation is not complicated, ,my idea is to place two images on a page (animated and not). And show/hide them on mouse over/out.

<div id="img_wrap" class="static">
    <img id="animated" src="animated.gif" alt="">
    <img id="static" src="static.jpg" alt="">
</div>

Script:

$(function(){
    $('#img_wrap').on( 'mouseenter', function() {
         $(this).toggleClass('animated', 'static');
    })
})

CSS:

.animated #static, .static #animated {
    display: none;
}
.animated #animated, .static #static {
    display: inline;
}

Or you can do it even with a plain CSS, if you don't need a support for IE6, wich does not triggers `hover` event on anything but `<a>`:

CSS:

#img_wrap #static, #img_wrap:hover #animated {
    display: inline;
}
#img_wrap #animated, #img_wrap:hover #static {
    display: none;
}

Problem

Original source