jQuery Animating Sprites Plugin - animateSprite

animateSprite is a funny jQuery plugin that makes it easy to create animating sprites in a block element.

You might also like:

• Spritely - Pure HTML & jQuery Background Animation Plugin

Basic Usage:

1. Include jQuery library and animateSprite.js on your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.animateSprite.js"></script>

2. Define a block element with width, height and background image

<div class="demo" style="width:400px; height:300px; background-image:url(demo.jpg)"></div>

3. Call the plugin with options

<script>
$(".demo").animateSprite({
columns: 10, // The number of columns the sprite sheet has, default 10
totalFrames: 20, // Number of frames the animation has
duration: 2000, // Time to complete the animation, in milliseconds
loop: true, // If the animation has to loop
complete: function(){
    alert("Sprite animation complete!"); // Called after the animation has finished (not called if is loop)
    }
})
</script>

4. Methods to control the animation

$("object").animateSprite("stopAnimation")      // stops the animation
$("object").animateSprite("resumeAnimation")    // continues the animation from the point where it was stopped
$("object").animateSprite("restartAnimation")   // starts the animation from the beginning
$("object").animateSprite("showFrame", n)       // displays the frame number "n"

Change Log:

v1.3.5

• Fix image cache problem on IE7/8.

v1.3.4

• Swhicthing animations now restart frame counter

v1.3.3

• Added autoplay: false to prevent the animation from playing from the start

v1.3.2

• Restart animation if it's called again

v1.3.0

• Added support for bower. You can install now the plugin using bower install animatesprite. 
• Fixed a leak when removing the DOM element, and added a new method to change FPS.

v1.2.0

• Fixed a problem setting the speed of the animation
• Added a new feature so you can specify a set of animations

v1.1.3

• Demo page and features update.

---

This awesome jQuery plugin is developed by blaiprat. For more Advanced Usages, please check the demo page or visit the official website.