003_隐藏和显示效果_隐藏和展示效果-优快云博客

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/109801741

1. hide()方法

1.1. 如果被选的元素已被显示, 则隐藏该元素。

1.2. 语法:

$(selector).hide(speed,callback);

1.3. 参数

1.4. 如果元素已经是完全不可见, 则该效果不产生任何变化, 除非规定了callback函数。

2. show()方法

2.1. 如果被选元素已被隐藏, 则显示这些元素。

2.2. 语法:

$(selector).show(speed,callback);

2.3. 参数

2.4. 如果元素已经是完全可见, 则该效果不产生任何变化, 除非规定callback函数。

2.5. 该效果适用于通过jQuery隐藏的元素, 或在CSS中声明display:none的元素(但不适用于visibility:hidden的元素)。

3. toggle()方法

3.1. toggle()方法切换元素的可见状态。如果被选元素可见, 则隐藏这些元素, 如果被选元素隐藏, 则显示这些元素。

3.2. 语法:

$(selector).toggle(speed,callback,switch);

3.3. 参数

4. 例子

4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery隐藏和显示效果</title>
		
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("p").hide('fast');
				});
				$('#btn2').click(function(){
					$("p").show('fast');
				});
				$('#btn3').click(function(){
					$("p").toggle('fast');
				});
				$('#btn4').click(function(){
					$("p").hide('slow');
				});
				$('#btn5').click(function(){
					$("p").show('slow');
				});
				$('#btn6').click(function(){
					$("p").toggle('slow');
				});
				$('#btn7').click(function(){
					$("p").hide('normal');
				});
				$('#btn8').click(function(){
					$("p").show('normal');
				});
				$('#btn9').click(function(){
					$("p").toggle('normal');
				});
				$('#btn10').click(function(){
					$("p").hide();
				});
				$('#btn11').click(function(){
					$("p").show();
				});
				$('#btn12').click(function(){
					$("p").toggle();
				});
				$('#btn13').click(function(){
					$("p").hide(3000);
				});
				$('#btn14').click(function(){
					$("p").show(3000);
				});
				$('#btn15').click(function(){
					$("p").toggle(3000);
				});
				$('#btn16').click(function(){
					$("p").toggle(true);
				});
				$('#btn17').click(function(){
					$("p").toggle(false);
				});
			});
		</script>
	</head>
	<body>
		<button id="btn1">fast隐藏段落</button> <button id="btn2">fast显示段落</button> <button id="btn3">fast隐藏/显示段落</button><br /><br />
		<button id="btn4">slow隐藏段落</button> <button id="btn5">slow显示段落</button> <button id="btn6">slow隐藏/显示段落</button><br /><br />
		<button id="btn7">normal隐藏段落</button> <button id="btn8">normal显示段落</button> <button id="btn9">normal隐藏/显示段落</button><br /><br />
		<button id="btn10">默认隐藏段落</button> <button id="btn11">默认显示段落</button> <button id="btn12">默认隐藏/显示段落</button><br /><br />
		<button id="btn13">3s隐藏段落</button> <button id="btn14">3s显示段落</button> <button id="btn15">3s隐藏/显示段落</button><br /><br />
		<button id="btn16">toggle(true)</button> <button id="btn17">toggle(false)</button>
		<p style="width: 300px; height: 300px; background: red;">jQuery隐藏和显示效果</p>
	</body>
</html>

4.2. 效果图