jQuery documentation jQuery documentationDisplays each of the set of matched elements if they are hidden.
<p style="display: none">Hello</p>
$("p").show()
[ <p style="display: block">Hello</p> ]
| 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. |
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.
$("p").show("slow");
$("p").show("slow",function(){
alert("Animation Done.");
});
Hides each of the set of matched elements if they are shown.
<p>Hello</p>
$("p").hide()
[ <p style="display: none">Hello</p> ]
| 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. |
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.
$("p").hide("slow");
$("p").hide("slow",function(){
alert("Animation Done.");
});
Toggles each of the set of matched elements. If they are shown, toggle makes them hidden. If they are hidden, toggle makes them shown.
<p>Hello</p><p style="display: none">Hello Again</p>
$("p").toggle()
[ <p style="display: none">Hello</p>, <p style="display: block">Hello Again</p> ]
| 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. |
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.
$("p").slideDown("slow");
$("p").slideDown("slow",function(){
alert("Animation Done.");
});
| 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. |
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.
$("p").slideUp("slow");
$("p").slideUp("slow",function(){
alert("Animation Done.");
});
| 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. |
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.
$("p").slideToggle("slow");
$("p").slideToggle("slow",function(){
alert("Animation Done.");
});
| 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. |
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.
$("p").fadeIn("slow");
$("p").fadeIn("slow",function(){
alert("Animation Done.");
});
| 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. |
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.
$("p").fadeOut("slow");
$("p").fadeOut("slow",function(){
alert("Animation Done.");
});
| 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. |
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.
$("p").fadeTo("slow", 0.5);
$("p").fadeTo("slow", 0.5, function(){
alert("Animation Done.");
});
| 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). |
| easing | String | (optional) The name of the easing effect that you want to use (Plugin Required). |
| callback | Function | (optional) A 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.
$("p").animate({
height: 'toggle', opacity: 'toggle'
}, "slow");
$("p").animate({
left: 50, opacity: 'show'
}, 500);
An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function (Only 'linear' is provided by default, with jQuery).
$("p").animate({
opacity: 'show'
}, "slow", "easein");