Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to pause a .gif image? [duplicate]

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.

like image 205
wbjari Avatar asked Apr 15 '15 22:04

wbjari


1 Answers

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

like image 142
renakre Avatar answered Oct 01 '22 02:10

renakre