Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Stop a gif animation onload, on mouseover start the activation

Tags:

jquery

gif

I have a page with a lot of GIFs.

<img src="gif/1303552574110.1.gif" alt="" > <img src="gif/1302919192204.gif" alt="" > <img src="gif/1303642234740.gif" alt="" > <img src="gif/1303822879528.gif" alt="" > <img src="gif/1303825584512.gif" alt="" > 

What I'm looking for

1 On page load => Animations for all gifs are stopped

2 On mouseover => Animations starts for that one gif

3 On mouseout => Animation stops again for that gif

I suppose this can be done in Jquery but I don't know how.

like image 789
denislexic Avatar asked Apr 28 '11 11:04

denislexic


People also ask

How do you stop an animated GIF?

The next time you're tired of seeing a GIF on a webpage just hit Esc on your keyboard and the GIF stops. This includes every GIF on a webpage. Even a page filled with animated GIFs, like Giphy, will stop with one key press.

How do I stop an animated GIF from looping?

Open the Animated gif in Photoshop. Go to the Window tab and select timeline(if the timeline is not already open). At the bottom of the timeline panel, you will find an option, which says "Forever". Change that to "Once".

How do you pause a GIF in HTML?

Pause a GIF with HTML details/summary — the accessible way. Here's another that's accessible using the details / summary elements. Check of this cool trick by Steve Faulkner that allows you to pause a GIF using the HTML <details> / <summary> element.

How do you pause a GIF in Javascript?

js installed, it's time to start controlling the GIF. Here's how you can pause a GIF then play on command — just add the freezeframe class (or a custom selector) to the GIFs you'd like control over. It's that easy! That's it!


1 Answers

No, you can't control the animation of the images.

You would need two versions of each image, one that is animated, and one that's not. On hover you can easily change from one image to another.

Example:

$(function(){   $('img').each(function(e){     var src = $(e).attr('src');     $(e).hover(function(){       $(this).attr('src', src.replace('.gif', '_anim.gif'));     }, function(){       $(this).attr('src', src);     });   }); }); 

Update:

Time goes by, and possibilities change. As kritzikatzi pointed out, having two versions of the image is not the only option, you can apparently use a canvas element to create a copy of the first frame of the animation. Note that this doesn't work in all browsers, IE 8 for example doesn't support the canvas element.

like image 177
Guffa Avatar answered Sep 23 '22 07:09

Guffa