Alternative to animated GIF’s: AnimateImages jQuery Plugin

by Marcel Wijnands 28. August 2010 16:06

I know of two cases where you would want an animated GIF, but it won’t do the trick:

  • Browsing the web using an Android phone.
  • Showing some kind of “processing..” animation when clicking a link/button and make it work in Internet Explorer.

I created an alternative using some images and a piece of javascript, and turned it into a jQuery plugin.

What you need is images like these:

circleball

Name them like:

circleball-1.png, circleball-2.png … circleball-8.png

Put a container on your page, like a span or a div, and use the plugin like this:

$(".circleball").animateImages("/images/circleball-@.png", 8, 90);

In the above line, the @ gets replaced with the imagenumbers, 8 means there are 8 images, 90 means the animation-interval is 90 ms.

You can check out a working example here! This could be optimized to use sprites instead, but it's a start.

jquery.animateImages can be downloaded below;

jquery.animateImages.zip (1.01 kb)

Tags:

General | JavaScript

Powered by BlogEngine.NET 1.5.0.7
Theme by Mads Kristensen | Modified by Mooglegiant