Delphinidin

The jQuery Easing plug-in provided by GSGD (http://gsgd.co.uk/sandbox/ jquery/easing/) allows you to add 30 diff erent types of easing effects to your Web site. The animate method already has two easing effects — swing and liner, but they're very limited — to be able to create more realistic easing effects such as bounce and elastic effects, it's best to use a plug-in. Easing controls an animation by accelerating or decelerating the rate at which it falls into place, commonly seen as an animation snapping into place. Easing gives animation a more realistic effect.

.animate(duration, easing, callback);

jQuery is extendable with plug-ins — as you know, you can write your own jQuery functions — but you can also write your own jQuery plug-ins if you would like to reuse the code for a certain task or release it to the jQuery open-source community for other users. Some sample effects included with the Easing plug-in are:

+ easeOutBounce
+ easeInBounce
+ easeInElastic
+ easeInCubic

The easeOutBounce and easeInBounce effects use a combination of easing with a bounce effect to simulate an object bouncing into the screen. The easeInElastic effect shows the element snapping into place like an elastic band. The easeInCubic is similar to the plain old ease-in effect, but it's much slower. The Easing plug-in Web site off ers examples of each of the thirty effects included with the plug-in. After you have downloaded the easing plug-in and included it in your page directly after the jQuery library file, you are ready to begin using it. Take the following code snippet from the previous example. If you set the easing parameter to easeOutBounce, the animation uses the easeOutBounce effect from the custom easing plug-in. It's that easy!

$(".slide-container").animate({
left: -slidePos,
},'easeOutBounce',1000, function(){
$('.slide-image'+slideNum+' .slide-text').css(
{'display':'block',
'position':'absolute',
'top':'0px',
'left':'-400px',
'padding':'5px',
'background':'#333333',
'opacity':'.9',
'color':'#ffffff',
'width':'100%'
}).animate({
top:0,
left:slidePos,
right:0,
},'easeOutBounce',1000, function(){
$('.slide-text').delay(5000).animate({
top:-100,
}, 1000);
});
});