This is a simple jQuery plugin that animates the Background property of a CSS Class. It's set up to be pretty versatile, and with some understanding of jQuery configurable for any situation. Try it below, the UFO is using a four frame CSS sprite image with the jAnimate script applied.
a.ufo{
background:url(images/ufo.gif) 0px 0px no-repeat;
display:block;
height:125px;
margin:0px 10px 0px 0px;
overflow:hidden;
width:125px;
}
The CSS sets our initial properties of the animating object including sprite size, image URL and other presentation properties as we see fit. With a CSS Sprite based image the jQuery function now moves our background set at 0px top and 0px left by 125 pixels. Doing this fast enough creates an illusion known as persistence of vision or POV.
$('.ufo').jAnimate({
'frameSize':'125',
'frames':'4',
'speed':'90',
'style':'h',
'repeat':'loop'
});
Using jQuery we jump x pixels either vertically or horizontally to the next frame based on the initialization call. When calling the function the plugin will find all elements with the .ufo class and add the mouseover & mouseout events and attach the animation script to that element. You also have a few optional parameters to determine if your CSS Sprite is tiled vertically or horizontally ('style':'h') and if it loops or bounces from start to finish ('repeat':'loop').
Check out the full source code at http://github.com/pjkarlik/jAnimate.