cari

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:172003semak 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) ".

Bagaimana untuk mencapai kesan div fade dalam jquery

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:

    milisaat
    <!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

    "cepat"
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);
      Petua:
    • 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 jquery3. 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