Bagaimana untuk membuat elemen slaid ke atas dan hilang dalam jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk membuat elemen slaid ke atas dan hilang dalam jquery

青灯夜游

Lepaskan： 2022-04-27 19:28:23

asal

2227 orang telah melayarinya

Kaedah: 1. Gunakan slideUp(), sintaks "$("elemen").slideUp(milisaat)" akan menyembunyikan elemen yang dipilih secara gelongsor 2. Gunakan slideToggle(), sintaks "; $( "Elemen").slideToggle(milisaat)", apabila elemen berada dalam keadaan paparan, elemen akan disembunyikan dalam cara gelongsor.

Bagaimana untuk membuat elemen slaid ke atas dan hilang dalam jquery

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

Kaedah Jquery untuk merealisasikan elemen menggelongsor ke atas dan hilang

1 Gunakan slideUp()

Kaedah slideUp() menyembunyikan elemen yang dipilih secara gelongsor.

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() {
				$(".btn1").click(function() {
					$("p").slideUp(1000);
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<button class="btn1">上滑隐藏元素</button>

	</body>
</html>

Salin selepas log masuk

Bagaimana untuk membuat elemen slaid ke atas dan hilang dalam jquery

2 Gunakan slideToggle()

slideToggle() akan menyemak status yang boleh dilihat bagi elemen yang dipilih a Jika elemen kelihatan, luncurkannya ke atas untuk menyembunyikannya, jika elemen tersembunyi, luncurkannya ke bawah untuk menunjukkannya.

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

		<p>这是一个段落。</p>
		<button class="btn1">滑动的隐藏/显示元素</button>

	</body>
</html>

Salin selepas log masuk

Bagaimana untuk membuat elemen slaid ke atas dan hilang dalam jquery

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

Atas ialah kandungan terperinci Bagaimana untuk membuat elemen slaid ke atas dan hilang dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!