Spritefy-Animation

Spritefy-Animation is a jQuery plugin to control animations generated by Spritefy

Version 0.5

Requirements

1. jQuery

Browser support

1. Safari 5.1+
2. Firefox 11+
3. Opera 11.62+
4. Chrome 18+

No toy for you IE (Internet Explorer doesn't support css animations)

Usage

$(<el>).spritefy(<animation_name>,<options>);

Example

$("#my_el").spritefy("sprite",{duration:1,count:5,onComplete:function(){console.log("completed")}});

Options

1. duration:[number] - Total duration in seconds of the animation (for each iteration)

2. delay:[number] - Delay to start the animation

3. count:[number] || "infinite" - How many times the animation will run, set "infinite" for infinite loop.

Controlling the animation

After you initialize the spritefy in the element, you will have access to the following methods:

1. animation.play() - Plays the current animation.

    $("#my_el").animation.play()
   

2. animation.pause() - Pauses the current animation.

    $("#my_el").animation.pause()
   

Animation events

You can set callbacks for the following animation events in the options:

1. onStart - Triggered when the animation starts

    $("#my_el").spritefy("sprite",{onStart:startHandle})
   

2. onIteration - Triggered for each time the animation plays in the loop

    $("#my_el").spritefy("sprite",{onIteration:iterationHandle})
   

3. onComplete - Triggered when the animation ends

    $("#my_el").spritefy("sprite",{onComplete:completeHandle})
   

See the Example

Spritefy

The CSS3 animation were generate by Spritefy tool.