From jQuery JavaScript Library
« Back to Effects
hide( )
Hides each of the set of matched elements if they are shown.
Examples:| Name | Type |
|---|
Hides all paragraphs then the link on click.
$("p").hide();
$("a").click(function () {
$(this).hide();
return false;
});
<!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").hide();
$("a").click(function () {
$(this).hide();
return false;
});
});
</script>
</head>
<body>
<p>Hello</p>
<a href="#">Click to hide me too</a>
<p>Here is another paragraph</p>
</body>
</html>
hide( speed, [callback] )
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.
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 shown paragraphs to hide slowly, completing the animation within 600 milliseconds.
$("button").click(function () {
$("p").hide("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").hide("slow");
});
});
</script>
<style>
p { background:#dad; font-weight:bold; }
</style>
</head>
<body>
<button>Hide 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
</body>
</html>
Animates all spans (words in this case) to hide fastly, completing each animation within 200 milliseconds. Once each animation is done, it starts the next one.
$("#hidr").click(function () {
$("span:last-child").hide("fast", function () {
// use callee so don't have to name the function
$(this).prev().hide("fast", arguments.callee);
});
});
$("#showr").click(function () {
$("span").show(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(){
$("#hidr").click(function () {
$("span:last-child").hide("fast", function () {
// use callee so don't have to name the function
$(this).prev().hide("fast", arguments.callee);
});
});
$("#showr").click(function () {
$("span").show(2000);
});
});
</script>
<style>
span { background:#def3ca; padding:3px; float:left; }
</style>
</head>
<body>
<button id="hidr">Hide</button>
<button id="showr">Show</button>
<div>
<span>Once</span> <span>upon</span> <span>a</span>
<span>time</span> <span>there</span> <span>were</span>
<span>three</span> <span>programmers...</span>
</div>
</body>
</html>
Hides the divs when clicked over 2 seconds, then removes the div element when its hidden. Try clicking on more than one box at a time.
for (var i = 0; i < 5; i++) {
$("<div>").appendTo(document.body);
}
$("div").click(function () {
$(this).hide(2000, function () {
$(this).remove();
});
});
<!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(){
for (var i = 0; i < 5; i++) {
$("<div>").appendTo(document.body);
}
$("div").click(function () {
$(this).hide(2000, function () {
$(this).remove();
});
});
});
</script>
<style>
div { background:#ece0fb; width:30px;
height:40px; margin:2px; float:left; }
</style>
</head>
<body>
<div></div>
</body>
</html>