Animating a gif on hover

Mark Kramer picture Mark Kramer · Sep 19, 2011 · Viewed 64.5k times · Source

I've looked for the answer for this and I found it, but I don't know how to use it.

Stop a gif animation onload, on mouseover start the activation

Guffa's answer to that question is exactly what I want, but I don't know how to use that code.

I have the jquery plugin, but where do I put the code (not the plugin; the code that was in Guffa's answer)? How do I use it in reference to the images? Is there a function I have to call to get it to work? If so, what would be the best way to call it?

Sorry for asking a question that has already been answered, but his answer wasn't specific enough and I couldn't comment to ask him for a more specific answer.

Answer

Amit picture Amit · Sep 19, 2011

Here is a working example for what you need - http://jsfiddle.net/EXNZr/1/

<img id="imgDino" src="http://bestuff.com/images/images_of_stuff/64x64crop/t-rex-51807.jpg?1176587870" />

<script>
    $(function() {
        $("#imgDino").hover(
            function() {
                $(this).attr("src", "animated.gif");
            },
            function() {
                $(this).attr("src", "static.gif");
            }                         
        );                  
    });
</script>