Bagaimana untuk merealisasikan pertukaran paparan dan bersembunyi dalam jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk merealisasikan pertukaran paparan dan bersembunyi dalam jquery

青灯夜游

Lepaskan： 2022-04-21 17:16:32

asal

2870 orang telah melayarinya

Kaedah pertukaran: 1. Gunakan "elemen object.toggle()" untuk menyembunyikan elemen apabila elemen kelihatan dan memaparkan elemen apabila ia tidak kelihatan 2. Gunakan "elemen object.slideToggle()" , apabila elemen kelihatan, elemen disembunyikan, apabila elemen tidak kelihatan, elemen dipaparkan 3. Gunakan "elemen object.fadeToggle()".

Bagaimana untuk merealisasikan pertukaran paparan dan bersembunyi dalam jquery

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.

Terdapat tiga cara untuk melaksanakan paparan dan menyembunyikan pertukaran dalam jquery:

kaedah toggle()
kaedah slideToggle()
kaedah fadeToggle()

kaedah togol()

Kaedah togol() bertukar antara hide() dan show() pada elemen yang dipilih.

Kaedah ini menyemak status boleh dilihat bagi elemen yang dipilih. Jika elemen tersembunyi, show() dijalankan, jika elemen kelihatan, hide() dijalankan - ini mencipta kesan togol.

Nota: Elemen tersembunyi tidak akan dipaparkan sepenuhnya (tidak lagi menjejaskan reka letak halaman).

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("p").toggle();
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<button>切换 hide() 和 show()</button>

	</body>
</html>

Salin selepas log masuk

Bagaimana untuk merealisasikan pertukaran paparan dan bersembunyi dalam jquery

2. kaedah slideToggle()

kaedah slideToggle() melaksanakan slideUp() dan Tukar antara slideDown() .

Kaedah ini menyemak status boleh dilihat bagi elemen yang dipilih. Jika elemen disembunyikan, slideDown() dijalankan, jika elemen kelihatan, slideUp() dijalankan - ini mencipta kesan togol.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("p").slideToggle();
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<button>切换 slideUp() 和 slideDown()</button>

	</body>
</html>

Salin selepas log masuk

Bagaimana untuk merealisasikan pertukaran paparan dan bersembunyi dalam jquery

3 kaedah fadeToggle()

kaedah fadeToggle() adalah antara kaedah fadeIn() dan fadeOut() bertukar antara.

Jika unsur-unsur pudar, fadeToggle() akan memaparkannya menggunakan kesan fade-in.
Jika elemen pudar, fadeToggle() akan memaparkannya menggunakan kesan fade out.

Nota: Elemen tersembunyi tidak akan dipaparkan sepenuhnya (tidak lagi menjejaskan reka letak halaman).

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("#div1").fadeToggle();
					$("#div2").fadeToggle("slow");
					$("#div3").fadeToggle(3000);
				});
			});
		</script>
	</head>
	<body>

		<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
		<button>点击淡入/淡出</button>
		<br><br>
		<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
		<br>
		<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
		<br>
		<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

	</body>
</html>

Salin selepas log masuk

Bagaimana untuk merealisasikan pertukaran paparan dan bersembunyi dalam jquery

[Pembelajaran yang disyorkan: tutorial video jQuery, video bahagian hadapan web]

Atas ialah kandungan terperinci Bagaimana untuk merealisasikan pertukaran paparan dan bersembunyi dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!