► The animate function is used to apply the custom animation effect to elements.

Syntax:

$(selector).animate({params}, [duration], [easing], [callback])

1. "param" defines the CSS properties on which you want to apply the animation.

2. "duration" specify how long the animation will run. It can be one of following values : "slow", "fast", "normal" or milliseconds.

3. "easing" is the string which specify the function for the transition.

4. "callback" is the function which we want to run once the animation effect is complete.

For example

<div id="clickToAnimate">

Click Me

</div>

<div id="mydiv" style="width:200px; height:300px; position: relative; right: 20px;">

</div>

Following is the jQuery to animate opacity, left offset, and height of the mydiv element

$('# clickToAnimate').click(function()

{

$('#book').animate({opacity: 0.30,left: '+=20',height: 'toggle'}, 3000, function()

{

// run after the animation complete.

});

});