From jQuery JavaScript Library

animate( params, speed, callback, easing )

A function for making your own, custom, animations. The key aspect of this function is the object of style properties that will be animated, and to what end. Each key within the object represents a style property that will also be animated (for example: "height", "top", or "opacity").

The value associated with the key represents to what end the property will be animated. If a number is provided as the value, then the style property will be transitioned from its current state to that new number. Otherwise, if the string "hide", "show", or "toggle" is provided, a default animation will be constructed for that property.

Return value: jQuery
Parameters:

• params (Hash): A set of style attributes that you wish to animate, and to what end.
• speed (String|Number): (optional) A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
• callback (Function): (optional) A function to be executed whenever the animation completes.
• easing (String): (optional) easing effect

Example:

 $("p").animate({
   height: 'toggle', opacity: 'toggle'
 }, "slow");

Example:

 $("p").animate({
   left: 50, opacity: 'show'
 }, 500);

fadeIn( speed, callback, easing )

Fade in all matched elements by adjusting their opacity and firing an optional callback after completion.

Only the opacity is adjusted for this animation, meaning that all of the matched elements should already have some form of height and width associated with them.

Return value: jQuery
Parameters:

• speed (String|Number): (optional) A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
• callback (Function): (optional) A function to be executed whenever the animation completes.
• easing (String): (optional) easing effect

Example:

 $("p").fadeIn("slow");

Example:

 $("p").fadeIn("slow",function(){
   alert("Animation Done.");
 });

fadeOut( speed, callback, easing )

Fade out all matched elements by adjusting their opacity and firing an optional callback after completion.

Only the opacity is adjusted for this animation, meaning that all of the matched elements should already have some form of height and width associated with them.

Return value: jQuery
Parameters:

• speed (String|Number): (optional) A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
• callback (Function): (optional) A function to be executed whenever the animation completes.
• easing (String): (optional) easing effect

Example:

 $("p").fadeOut("slow");

Example:

 $("p").fadeOut("slow",function(){
   alert("Animation Done.");
 });

fadeTo( speed, opacity, callback, easing )

Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion.

Only the opacity is adjusted for this animation, meaning that all of the matched elements should already have some form of height and width associated with them.

Return value: jQuery
Parameters:

• speed (String|Number): A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
• opacity (Number): The opacity to fade to (a number from 0 to 1).
• callback (Function): (optional) A function to be executed whenever the animation completes.
• easing (String): (optional) easing effect

Example:

 $("p").fadeTo("slow", 0.5);

Example:

 $("p").fadeTo("slow", 0.5, function(){
   alert("Animation Done.");
 });

hide( speed, callback, easing )

Hide all matched elements using a graceful animation and firing an optional callback after completion.

The height, width, and opacity of each of the matched elements are changed dynamically according to the specified speed.

Return value: jQuery
Parameters:

• speed (String|Number): A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
• callback (Function): (optional) A function to be executed whenever the animation completes.
• easing (String): (optional) easing effect

Example:

 $("p").hide("slow");

Example:

 $("p").hide("slow",function(){
   alert("Animation Done.");
 });

show( speed, callback, easing )

Show all matched elements using a graceful animation and firing an optional callback after completion.

The height, width, and opacity of each of the matched elements are changed dynamically according to the specified speed.

Return value: jQuery
Parameters:

• speed (String|Number): A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
• callback (Function): (optional) A function to be executed whenever the animation completes.
• easing (String): (optional) easing effect

Example:

 $("p").show("slow");

Example:

 $("p").show("slow",function(){
   alert("Animation Done.");
 });

slideDown( speed, callback, easing )

Reveal all matched elements by adjusting their height and firing an optional callback after completion.

Only the height is adjusted for this animation, causing all matched elements to be revealed in a "sliding" manner.

Return value: jQuery
Parameters:

• speed (String|Number): (optional) A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
• callback (Function): (optional) A function to be executed whenever the animation completes.
• easing (String): (optional) easing effect

Example:

 $("p").slideDown("slow");

Example:

 $("p").slideDown("slow",function(){
   alert("Animation Done.");
 });

slideToggle( speed, callback, easing )

Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion.

Only the height is adjusted for this animation, causing all matched elements to be hidden in a "sliding" manner.

Return value: jQuery
Parameters:

• speed (String|Number): (optional) A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
• callback (Function): (optional) A function to be executed whenever the animation completes.
• easing (String): (optional) easing effect

Example:

 $("p").slideToggle("slow");

Example:

 $("p").slideToggle("slow",function(){
   alert("Animation Done.");
 });

slideUp( speed, callback, easing )

Hide all matched elements by adjusting their height and firing an optional callback after completion.

Only the height is adjusted for this animation, causing all matched elements to be hidden in a "sliding" manner.

Return value: jQuery
Parameters:

• speed (String|Number): (optional) A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
• callback (Function): (optional) A function to be executed whenever the animation completes.
• easing (String): (optional) easing effect

Example:

 $("p").slideUp("slow");

Example:

 $("p").slideUp("slow",function(){
   alert("Animation Done.");
 });

hide()

Hides each of the set of matched elements if they are shown.

Return value: jQuery
Example:

 $("p").hide()

 <p>Hello</p>

 [ <p style="display: none">Hello</p> ]
 
 var pass = true, div = $("div");
 div.hide().each(function(){
   if ( this.style.display != "none" ) pass = false;
 });
 ok( pass, "Hide" );

show()

Displays each of the set of matched elements if they are hidden.

Return value: jQuery
Example:

 $("p").show()

 <p style="display: none">Hello</p>

 [ <p style="display: block">Hello</p> ]

toggle()

Toggles each of the set of matched elements. If they are shown, toggle makes them hidden. If they are hidden, toggle makes them shown.

Return value: jQuery
Example:

 $("p").toggle()

 <p>Hello</p><p style="display: none">Hello Again</p>

 [ <p style="display: none">Hello</p>, <p style="display: block">Hello Again</p> ]