Pre-defined animations using 10 animation steps, based on the work of this 2 guys:

Daniel Eden http://daneden.me/animate/

Louis Remi http://louisremi.github.com/jquery.transform.js/index.html

Included animations
- Bounce
- Shake
- Tada
- Swing
- Wobble
- Wiggle
- Pulse
- Bounce in
- Bounce in up
- Bounce in down
- Bounce in left
- Bounce in right
- Lightspeed in
- Roll in
- Roll out

1. Download and set the jQuery transfrom plugin from http://louisremi.github.com/jquery.transform.js/index.html

2. Change these 2 vars to fit your needs
   var $element = $('.myClass'); // your jQuery selector
   var chosenFx = 'rollOut'; // the effect name camelCased
   

$element.animate(fxPattern[0], fxPattern[1], fxPattern[2]); // wherever you want it to be triggered

If you want to override/add an effect, you can just do the following:

fx.myNewEffect = {
step0: 'your transform effect at 0%',
step1: 'your transform effect at 10%',
step2: 'your transform effect at 20%',
step3: 'your transform effect at 30%',
step4: 'your transform effect at 40%',
step5: 'your transform effect at 50%',
step6: 'your transform effect at 60%',
step7: 'your transform effect at 70%',
step8: 'your transform effect at 80%',
step9: 'your transform effect at 90%',
step10: 'your transform effect at 100%'
}

That's it.

var $element = $('.myClass');
var chosenFx = 'bounceInRight';
// let's bind it to some button
$('.myButton').on('click', function() {
$element.animate(fxPattern[0], fxPattern[1], fxPattern[2]); // wherever you want it to be triggered
});