Download SpriteAnim v1.0.0 Jquery SpriteAnim plugin

Current Version: 1.0

Tested compatibility: Firefox, Chrome, IE8+, Safari

The Jquery SpriteAnim plugin allows you to create animated hover effects using a stacked png image, like these:




To create mouseover effects like this (Mouseover the buttons):


by specifying code like this:

		$('#vineButton').spriteAnim({
			srcImg: "images/vine_button.png",
			state: "hover",
			animType:"up",
			orientation: "h",
			width: 118,
			height: 66,
			startFrame: 1,
			endFrame: 6,
			frameDelay: 50
		});
		$('#purpleButton').spriteAnim({
			srcImg: "/images/purple_button.png",
			state: "hover",
			animType:"up",
			orientation: "h",
			width: 91,
			height: 46,
			startFrame: 1,
			endFrame: 6,
			frameDelay: 50
		});

You can also create looping animations, similar to animated GIF images, but with true alpha transparency and 32bit color (If you use PNG images)
(The source image is too big to display on the page, click the image to view it in a new window)


by specifying code like this:

		$('#skyCycle').spriteAnim({
			srcImg: "/images/SkyCycle_small.png",
			state: "always",
			animType:"loop",
			orientation: "v",
			width: 80,
			height: 80,
			startFrame: 1,
			endFrame: 20,
			jumpFrame: 1,
			frameDelay: 60
		});

You can also create hover loops; Images that have a start animation, then loop while the mouse is hovering, then animate back down to the static state.


When the mouse is moved over this image, it will play frames 1 through 3, then loop frames 4 through 7, then when the mouse is moved out, it will animate backwards frames 3 through 1.

The code looks like this:

		$('#wfButton').spriteAnim({
			srcImg: "/images/wf_button.png",
			state: "hover",
			animType:"loop",
			orientation: "h",
			width: 108,
			height: 108,
			startFrame: 1,
			endFrame: 7,
			jumpFrame: 4,
			frameDelay: 60
		});