Search code examples
jquerycssanimated-gifonhover

gif starts playing on hover and stops when mouseout?

I wana make the below gif which stoped initially but starts playing on hover and when mouseout it will stops... can anyone help me out??

enter image description here

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;
}