Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencapai kesan div fade dalam jquery

Bagaimana untuk mencapai kesan div fade dalam jquery

青灯夜游asal: 2022-09-14 18:42:171987semak imbas

Tiga kaedah pelaksanaan: 1. Gunakan fadeOut() untuk menukar kelegapan elemen yang dipilih secara beransur-ansur, daripada kelihatan kepada tersembunyi, menggunakan sintaks "elemen object.fadeIn (fade in duration)" 2. Gunakan fadeTo () Tukar kelegapan elemen yang dipilih secara beransur-ansur, sintaksnya ialah "objek elemen.fadeTo(tempoh pudar, 0)"; 3. Gunakan fadeToggle() untuk menukar kelegapan elemen yang dipilih secara beransur-ansur, sintaksnya ialah "objek elemen. fadeToggle(tempoh pudar) ".

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

Dalam jquery, terdapat tiga kaedah untuk mencapai kesan pudar div:

kaedah fadeOut()
fadeToggle () kaedah
kaedah fadeTo()

1 kaedah fadeOut()

fadeOut () kaedah secara beransur-ansur mengubah kelegapan elemen yang dipilih daripada kelihatan kepada tersembunyi (kesan pudar).

Sintaks:

$(selector).fadeOut(speed,easing,callback)

Parameter

Penerangan

kelajuan

Pilihan. Menentukan kelajuan kesan pudar.

参数

描述

speed

可选。规定褪色效果的速度。

可能的值：

毫秒
"slow"
"fast"

easing

可选。规定在动画的不同点上元素的速度。默认值为 "swing"。

可能的值：

"swing" - 在开头/结尾移动慢，在中间移动快
"linear" - 匀速移动

提示：扩展插件中提供更多可用的 easing 函数。

callback

可选。fadeOut() 方法执行完之后，要执行的回调函数。

Nilai yang mungkin:

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

	<body>
		<p>以下实例演示了 fadeOut()  使用了不同参数的效果。</p>
		<button>点击渐隐div元素。</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>

"lambat" Bagaimana untuk mencapai kesan div fade dalam jquery

meringankan

Pilihan. Menentukan kelajuan elemen pada titik yang berbeza dalam animasi. Nilai lalai ialah "swing". Nilai yang mungkin:

"ayunan" - bergerak perlahan pada permulaan/akhir, pantas di tengah

"linear" - bergerak pada kelajuan tetap

$(selector).fadeTo(speed,opacity,callback);

Lebih banyak fungsi pelonggaran tersedia disediakan dalam pemalam sambungan.

panggilan balik

Pilihan. Fungsi panggil balik untuk dilaksanakan selepas kaedah fadeOut() dilaksanakan.

Contoh:

kaedah fadeTo()

Kaedah fadeTo() membenarkan pudar kepada kelegapan tertentu (nilai antara 0 dan 1).

Sintaks:

$(document).ready(function() {
	$("button").click(function() {
		$("#div1").fadeTo("fast",0);
		$("#div2").fadeTo("slow",0);
		$("#div3").fadeTo(3000,0);
	});
});

Bagaimana untuk mencapai kesan div fade dalam jquery

Parameter kelajuan yang diperlukan menentukan tempoh kesan. Ia boleh mengambil nilai berikut: "perlahan", "cepat" atau milisaat.

Parameter kelegapan yang diperlukan dalam kaedah fadeTo() menetapkan kesan pudar kepada kelegapan yang diberikan (nilai antara 0 dan 1).

Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan selepas fungsi selesai.
Anda hanya perlu menetapkan nilai parameter opacityc kepada 0 untuk mencapai kesan pudar.

$(document).ready(function() {
	$("button").click(function() {
		$("#div1").fadeToggle();
		$("#div2").fadeToggle("slow");
		$("#div3").fadeToggle(5000);
	});
});

Bagaimana untuk mencapai kesan div fade dalam jquery 3. kaedah fadeToggle()

kaedah fadeToggle() boleh digunakan dalam fadeIn() dan fadeOut( ) kaedah bertukar antara.

Jika elemen disembunyikan, fadeToggle() menambah kesan fade-in pada elemen. fadeToggle() menambah kesan fade-out pada elemen jika ia sudah dipaparkan. [Pembelajaran yang disyorkan: tutorial video jQuery, bahagian hadapan web]

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan div fade dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

jquery 回调函数对象

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Apakah kegunaan kaedah jquery eq().Artikel seterusnya：Apakah kegunaan kaedah jquery eq().

Artikel berkaitan

Lihat lagi