jQuery hide and show
jQuery Effect - Hide and Show
Example
jQuery hide()
Simple jQuery hide() method demonstration.
jQuery hide()
Another hide() instance. Demonstrates how to hide text.
jQuery hide() and show()
With jQuery, you can hide and show HTML elements using the hide() and show() methods:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
Syntax:
$(selector).show(speed,callback);
The optional speed parameter specifies the hidden/displayed speed , which can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is the name of the function to be executed after hiding or displaying is completed.
The following example demonstrates the hide() method with the speed parameter:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<body>
<button>隐藏</button>
<p>这是个段落，内容比较少。</p>
<p>这是另外一个小段落</p>
</body>
</html>Running Example»
Click the "Run Instance" button to view the online instance
jQuery toggle()
With jQuery, you can use the toggle() method to switch hide () and show() methods.
Show hidden elements and hide displayed elements:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
</body>
</html>Run Example»
Click the "Run Instance" button to view the online instance
Syntax:
The optional speed parameter specifies the speed of hiding/showing, and can take the following values: "slow", "fast" or milliseconds.
The optional callback parameter is the name of the function executed after the toggle() method is completed.
