8

Is it possible to start the .gif animation when you hover over it and pause it when you're not hovering over it? I do not want to reset the image to the start of it's animation when stopping hovering over it.

EDIT: Thanks for the help, but nothing worked like I wanted. Best solution I found for this was this:

HTML:

<img id="gif1" src="static1.jpg">

JS:

$("#gif1").hover(
    function() {
        $(this).attr("src", "animate1.gif");
    },
    function() {
        $(this).attr("src", "static1.jpg");
    }                         
);

So, just the resetting thingy.

wbjari
  • 151
  • 1
  • 2
  • 10
  • http://stackoverflow.com/questions/5818003/stop-a-gif-animation-onload-on-mouseover-start-the-activation – ROMANIA_engineer Apr 15 '15 at 22:18
  • You can definitely do it using canvas, let me know if you need a better example: http://stackoverflow.com/questions/3688460/stopping-gif-animation-programmatically – iMoses Apr 15 '15 at 22:23
  • Also, take a look at this library: http://slbkbs.org/jsgif/ – iMoses Apr 15 '15 at 22:33
  • There might be an easier way depending on what the animation is. (static image that rotates?) – Kevin B Apr 16 '15 at 19:03
  • @KevinB Don't really know what you mean.. You can check my site here: http://jariverhaard.nl/ – wbjari Apr 16 '15 at 19:15

1 Answers1

6

One possible solution would be having two images one still picture and one animated gif. Then, change the src when hovered (as desribed here: https://stackoverflow.com/a/5818049/1845408).

There is also plug-in then you can use this for this purpose: https://github.com/chrisantonellis/freezeframe

I guess this plug-in applies the logic described above, just more nicely.

However, if you really want to pause the animation, you may need to have the set of images that builds the animation, and move through the images in the preset order when mouseover, and pause when mouse is out and record the last image paused. This was implemented here: https://stackoverflow.com/a/20644622/1845408 Click for DEMO

Community
  • 1
  • 1
renakre
  • 8,001
  • 5
  • 46
  • 99
  • 11
    This will not simulate a pause effect since it will not stop at the same position plus won't continue from the same position when playing again. – dev7 Apr 15 '15 at 22:18
  • 2
    Having multiple images is very bad for performance. The least you can do is create an image sprite of the animation and some sort of code to go through the frames. – iMoses Apr 15 '15 at 22:36