How to play and stop animated gifs with jQuery


by Tommy 0

If you have a Media Sharing site to loading multiple GIFs on a page, this will make your users feel uncomfortable. Today I will bring to you solutions to only have them animate when a user performs a actions.


Below is 2 options to play and stop animated gifs with jQuery for you:

1. Use gifplayer created by Rubén Torres:

With gifplayer jquery plugin can play and stop animated gifs similar to 9gag.

Add libraries of gifplayer, jQuery on your website:

<link rel="stylesheet" href="css/gifplayer.css">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.gifplayer.js"></script>

In IMG tag add a static version of the gif file to “src” atrribute when add a “data-gif” attribute with the path to the animated gif or simply have an image with the same same and the .gif extension in the same folder of the “preview” image.

<img id="banana" src="photo/gif01.jpg" data-gif="photo/gif01-animated.gif" class="gifs"/>
<img id="cheetah" src="photo/gif02.jpg" class="gifs"/>

Download gifplayer

2. Use Embedly jQuery

Embedly Display with “animate=false” to only animate the GIF when the user hovers mouse on the image.
View Demo and Download

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Are you human?: