Apakah fungsi animasi jquery?-Soal Jawab bahagian hadapan-php.cn

Apakah fungsi animasi jquery?

青灯夜游

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

asal

2913 orang telah melayarinya

Terdapat 17 jenis fungsi animasi jquery: 1. animate(), digunakan untuk menggunakan animasi tersuai pada elemen terpilih 2. hide(), digunakan untuk menyembunyikan elemen terpilih 3. show(), Digunakan untuk memaparkan elemen yang dipilih; 4. fadeOut(), digunakan untuk menyembunyikan elemen dengan menetapkan kelegapan;

Apakah fungsi animasi jquery?

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

fungsi animasi jquery

Jadual di bawah menyenaraikan semua kaedah jQuery yang digunakan untuk mencipta kesan animasi.

方法	描述
animate()	对被选元素应用"自定义"的动画
clearQueue()	对被选元素移除所有排队函数（仍未运行的）
delay()	对被选元素的所有排队函数（仍未运行）设置延迟
dequeue()	移除下一个排队函数，然后执行函数
fadeIn()	逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()	逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo()	把被选元素逐渐改变至给定的不透明度
fadeToggle()	在 fadeIn() 和 fadeOut() 方法之间进行切换
finish()	对被选元素停止、移除并完成所有排队动画
hide()	隐藏被选元素
queue()	显示被选元素的排队函数
show()	显示被选元素
slideDown()	通过调整高度来滑动显示被选元素
slideToggle()	slideUp() 和 slideDown() 方法之间的切换
slideUp()	通过调整高度来滑动隐藏被选元素
stop()	停止被选元素上当前正在运行的动画
toggle()	hide() 和 show() 方法之间的切换

Berikut ialah beberapa fungsi animasi yang biasa digunakan.

1. animate()

Kaedah animate() melaksanakan animasi tersuai set sifat CSS.

Kaedah ini menukar elemen dari satu keadaan ke keadaan lain melalui gaya CSS. Nilai sifat CSS berubah secara beransur-ansur, membolehkan anda mencipta kesan animasi.

Hanya nilai angka boleh dianimasikan (cth. "margin:30px"). Nilai rentetan tidak boleh dianimasikan (seperti "warna latar:merah").

Petua: Gunakan " =" atau "-=" untuk mencipta animasi relatif.

Contoh: Gunakan animasi pada elemen dengan menukar ketinggiannya:

<!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() {
					$("#box").animate({
						height: "300px"
					});
				});
				$("#btn2").click(function() {
					$("#box").animate({
						height: "100px"
					});
				});
			});
		</script>
	</head>
	<body>

		<button id="btn1">使用动画放大高度</button>
		<button id="btn2">重置高度</button>
		<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
		</div>

	</body>
</html>

Salin selepas log masuk

Apakah fungsi animasi jquery?

2 toggle()

kaedah hide() menyembunyikan elemen yang dipilih.
show() memaparkan elemen yang dipilih
togol(): bertukar antara kaedah hide() dan show()

Contoh: sembunyikan atau tunjukkan

elemen

<!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").hide();
				});
				$(".btn2").click(function() {
					$("p").show();
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<button class="btn1">隐藏</button>
		<button class="btn2">显示</button>

	</body>
</html>
</html>

Salin selepas log masuk

Apakah fungsi animasi jquery?

3. dan kaedah slideToggle()

slideUp(): Sembunyikan elemen yang dipilih secara gelongsor.
kaedah slideDown(): Paparkan elemen yang dipilih dalam cara gelongsor.
kaedah slideToggle() : bertukar antara kaedah slideUp() dan slideDown()

Contoh: Sembunyikan

<!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();
				});
				$(".btn2").click(function() {
					$("p").slideDown();
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<button class="btn1">上滑</button>
		<button class="btn2">下滑</button>

	</body>
</html>

Salin selepas log masuk

Apakah fungsi animasi jquery?

4 fadeIn(), fadeOut() dan fadeToggle()

<🎜 The >fadeIn(. ) kaedah secara beransur-ansur mengubah kelegapan elemen yang dipilih daripada tersembunyi kepada kelihatan (kesan pudar).
Kaedah fadeOut() secara beransur-ansur menukar kelegapan elemen yang dipilih daripada kelihatan kepada tersembunyi (kesan pudar).
fadeToggle(): Tukar antara kaedah fadeIn() dan fadeOut()

Contoh: Gunakan kesan fade-in untuk memaparkan

Elemen

<!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").fadeOut()
				});
				$(".btn2").click(function() {
					$("p").fadeIn();
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<button class="btn1">淡出</button>
		<button class="btn2">淡入</button>

	</body>
</html>

Salin selepas log masuk

Apakah fungsi animasi jquery?

5 kaedah fadeTo()

fadeTo() secara beransur-ansur menukar kelegapan elemen yang dipilih kepada nilai yang ditentukan (kesan pudar).

<!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").fadeTo(1000, 0.4);
				});
			});
		</script>
	</head>
	<body>

		<button>逐渐改变P元素的不透明度</button>
		<p>这是一个段落。</p>

	</body>
</html>

Salin selepas log masuk

Apakah fungsi animasi jquery?