From jQuery JavaScript Library
« Back to Effects
show( )
Displays each of the set of matched elements if they are hidden.
Same as
show( speed, [callback] ) without animations. Doesn't change anything if the selected elements are all visible. It doesn't matter if the element is hidden via a hide() call, or via a display:none in a stylesheet.
Examples:| Name | Type |
|---|
Shows all paragraphs.
$("p").show()
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="../jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").show()
});
</script>
</head>
<body>
<p style="display:none">Hello</p>
</body>
</html>
show( speed, [callback] )
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.
Arguments:| 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 (Optional) | Function | |
|---|
A function to be executed whenever the animation completes, executes once for each element animated against.
function callback() {
this; // dom element
}
|
Examples:| Name | Type |
|---|
Animates all hidden paragraphs to show slowly, completing the animation within 600 milliseconds.
$("button").click(function () {
$("p").show("slow");
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="../jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
$("p").show("slow");
});
});
</script>
<style>
p { background:yellow; }
</style>
</head>
<body>
<button>Show it</button>
<p style="display: none">Hello</p>
</body>
</html>
Animates all hidden divs to show fastly in order, completing each animation within 200 milliseconds. Once each animation is done, it starts the next one.
$("#showr").click(function () {
$("div:eq(0)").show("fast", function () {
// use callee so don't have to name the function
$(this).next().show("fast", arguments.callee);
});
});
$("#hidr").click(function () {
$("div").hide(2000);
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="../jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#showr").click(function () {
$("div:eq(0)").show("fast", function () {
// use callee so don't have to name the function
$(this).next().show("fast", arguments.callee);
});
});
$("#hidr").click(function () {
$("div").hide(2000);
});
});
</script>
<style>
div { background:#def3ca; margin:3px; width:80px;
display:none; float:left; text-align:center; }
</style>
</head>
<body>
<button id="showr">Show</button>
<button id="hidr">Hide</button>
<div>Hello,</div>
<div>how</div>
<div>are</div>
<div>you?</div>
</body>
</html>
Animates all span and input elements to show normally. Once the animation is done, it changes the text.
function doIt() {
$("span,div").show("normal");
}
$("button").click(doIt); // can pass in function name
$("form").submit(function () {
if ($("input").val() == "yes") {
$("p").show(4000, function () {
$(this).text("Ok, DONE! (now showing)");
});
}
$("span,div").hide("normal");
return false; // to stop the submit
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="../jquery-latest.js"></script>
<script>
$(document).ready(function(){
function doIt() {
$("span,div").show("normal");
}
$("button").click(doIt); // can pass in function name
$("form").submit(function () {
if ($("input").val() == "yes") {
$("p").show(4000, function () {
$(this).text("Ok, DONE! (now showing)");
});
}
$("span,div").hide("normal");
return false; // to stop the submit
});
});
</script>
<style>
span { display:none; }
div { display:none; }
p { font-weight:bold; background-color:#fcd; }
</style>
</head>
<body>
<button>Do it!</button>
<span>Are you sure? (type 'yes' if you are) </span>
<div>
<form>
<input type="text" />
</form>
</div>
<p style="display:none;">I'm hidden...</p>
</body>
</html>