jQuery website jQuery documentation

Effects / Animations

show(Object speed) : jQuery

speedObjectA string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).

Show all matched elements using a graceful animation. The height, width, and opacity of each of the matched elements are changed dynamically according to the specified speed.

Example

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

show(Object speed, Function callback) : jQuery

speedObjectA string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callbackFunctionA function to be executed whenever the animation completes.

Show all matched elements using a graceful animation and firing a callback function after completion. The height, width, and opacity of each of the matched elements are changed dynamically according to the specified speed.

Example

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

hide(Object speed) : jQuery

speedObjectA string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).

Hide all matched elements using a graceful animation. The height, width, and opacity of each of the matched elements are changed dynamically according to the specified speed.

Example

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

hide(Object speed, Function callback) : jQuery

speedObjectA string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callbackFunctionA function to be executed whenever the animation completes.

Hide all matched elements using a graceful animation and firing a callback function after completion. The height, width, and opacity of each of the matched elements are changed dynamically according to the specified speed.

Example

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

slideDown(Object speed) : jQuery

speedObjectA string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).

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

Example

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

slideDown(Object speed, Function callback) : jQuery

speedObjectA string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callbackFunctionA function to be executed whenever the animation completes.

Reveal all matched elements by adjusting their height and firing a callback function after completion. Only the height is adjusted for this animation, causing all matched elements to be revealed in a "sliding" manner.

Example

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

slideUp(Object speed) : jQuery

speedObjectA string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).

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

Example

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

slideUp(Object speed, Function callback) : jQuery

speedObjectA string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callbackFunctionA function to be executed whenever the animation completes.

Hide all matched elements by adjusting their height and firing a callback function after completion. Only the height is adjusted for this animation, causing all matched elements to be hidden in a "sliding" manner.

Example

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

slideToggle(Object speed) : jQuery

speedObjectA string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).

Toggle the visibility of all matched elements by adjusting their height. Only the height is adjusted for this animation, causing all matched elements to be hidden in a "sliding" manner.

Example

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

slideToggle(Object speed, Function callback) : jQuery

speedObjectA string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callbackFunctionA function to be executed whenever the animation completes.

Toggle the visibility of all matched elements by adjusting their height and firing a callback function after completion. Only the height is adjusted for this animation, causing all matched elements to be hidden in a "sliding" manner.

Example

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

fadeIn(Object speed) : jQuery

speedObjectA string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).

Fade in all matched elements by adjusting their opacity. 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.

Example

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

fadeIn(Object speed, Function callback) : jQuery

speedObjectA string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callbackFunctionA function to be executed whenever the animation completes.

Fade in all matched elements by adjusting their opacity and firing a callback function 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.

Example

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

fadeOut(Object speed) : jQuery

speedObjectA string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).

Fade out all matched elements by adjusting their opacity. 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.

Example

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

fadeOut(Object speed, Function callback) : jQuery

speedObjectA string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callbackFunctionA function to be executed whenever the animation completes.

Fade out all matched elements by adjusting their opacity and firing a callback function 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.

Example

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

fadeTo(Object speed, Number opacity) : jQuery

speedObjectA string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
opacityNumberThe opacity to fade to (a number from 0 to 1).

Fade the opacity of all matched elements to a specified opacity. 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.

Example

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

fadeTo(Object speed, Number opacity, Function callback) : jQuery

speedObjectA string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
opacityNumberThe opacity to fade to (a number from 0 to 1).
callbackFunctionA function to be executed whenever the animation completes.

Fade the opacity of all matched elements to a specified opacity and firing a callback function 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.

Example

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

animate(Hash params, Object speed, Function callback) : jQuery

paramsHashA set of style attributes that you wish to animate, and to what end.
speedObjectA string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callbackFunctionA function to be executed whenever the animation completes.

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. Oterwise if the string "hide", "show", or "toggle" is provided, a default animation will be constructed for that property.

Example

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