How to use jQuery Animation effect - animate method ?

Creates custom animations.

SYNTAX

$(selector).animate({params},speed,callback);

params - defines the CSS properties to be animated.

Example

It moves a <div> element to the left, until it has reached a left property of 250px 

$("button").click(function() {

 $("div").animate({left:'250px'});

});

Manipulate multiple properties

Example

$("button").click(function() {

  $("div").animate({

    left:'250px',

    opacity:'0.5',

    height:'150px',

    width:'150px'

  });

}); 

Using Relative values

Relative values (relative to the element's current value) can be defined by putting += or -= in front of the value.

Example

$("button").click(function() {

  $("div").animate({

    left:'250px',

    height:'+=150px',

    width:'+=150px'

  });

}); 

Using Pre-defined values

You can even specify a property's animation value as "show", "hide", or "toggle":

Example

$("button").click(function() {

  $("div").animate({

    height:'toggle'

  });

}); 

Queue Functionality

By default, queue functionality for animations is implicit in jQuery.

If you write multiple animate() calls after each other, jQuery creates an "internal" queue with these method calls. Then it runs the animate calls one-by-one.

Example

$("button").click(function() {

  var div=$("div");

  div.animate({height:'300px',opacity:'0.4'},"slow");

  div.animate({width:'300px',opacity:'0.8'},"slow");

  div.animate({height:'100px',opacity:'0.4'},"slow");

  div.animate({width:'100px',opacity:'0.8'},"slow");

}); 

Example

First moves the <div> element to the right, and then increases the font size of the text

$("button").click(function() {

  var div=$("div");

  div.animate({left:'100px'},"slow");

  div.animate({fontSize:'3em'},"slow");

});