Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk menggunakan kaedah fadeout dalam jquery

Bagaimana untuk menggunakan kaedah fadeout dalam jquery

WBOY
WBOYasal
2022-04-15 12:01:323120semak imbas

Dalam jquery, kaedah fadeout() digunakan untuk menukar kelegapan elemen yang dipilih secara beransur-ansur, daripada unsur kelihatan kepada tersembunyi menggunakan kaedah ini tidak akan menjejaskan reka letak halaman dan parameter dalam tetapan kaedah boleh ditukar Kelajuan elemen pudar Sintaks ialah "objek elemen.fadeOut(kelajuan, pelonggaran, fungsi pelaksanaan)".

Bagaimana untuk menggunakan kaedah fadeout dalam jquery

Persekitaran pengendalian tutorial ini: sistem windows10, versi jquery3.2.1, komputer Dell G3.

Cara menggunakan kaedah fadeout dalam jquery

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

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

Petua: Kaedah ini biasanya digunakan bersama dengan kaedah fadeIn().

Sintaks

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

Parameter dinyatakan seperti berikut:

  • kelajuan adalah pilihan. Menentukan kelajuan kesan pudar. Nilai yang mungkin:

ms

"lambat"

"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, bergerak pantas di tengah

"linear" - bergerak pada kelajuan tetap

Petua : Lebih banyak fungsi pelonggaran tersedia disediakan dalam pemalam sambungan.

  • panggilan balik Pilihan. Fungsi yang akan dilaksanakan selepas kaedah fadeOut() dilaksanakan.

Contohnya adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut()
});
});
</script>
</head>
<body>
<button class="btn1">淡出</button>
<p>这是一个段落。</p>
</body>
</html>

Hasil keluaran:

 4.gif

Cadangan tutorial video berkaitan: Tutorial video jQuery

Atas ialah kandungan terperinci Bagaimana untuk menggunakan kaedah fadeout dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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