Siaran ini akan menerangkan pelaksanaan praktikal kaedah fadeOut() jQuery untuk mencipta kesan fade-out yang lancar.
Bagaimana untuk Mencipta Kesan Fade-Out Lancar Menggunakan Kaedah fadeOut() jQuery?
jQuery ' fadeOut() ” kaedah menyembunyikan elemen yang dipilih secara beransur-ansur dengan mengurangkan kelegapannya. Kaedah ini menukar keadaan elemen yang dipilih daripada kelihatan kepada tersembunyi. Elemen tersembunyi tidak dipaparkan pada halaman web sehingga pengguna memaparkannya semula menggunakan “ fadeIn() ” kaedah.
Sintaks
$ ( pemilih ) . fadeOut ( kelajuan, kelonggaran, panggil balik ) ;
Sintaks di atas menyokong parameter pilihan berikut untuk menyesuaikan kesan fade-out:
- kelajuan: Ia menentukan kelajuan kesan pudar dalam milisaat. Secara lalai nilainya ialah '400ms'. Selain itu, ia juga menyokong dua nilai terbina dalam 'lambat' dan 'cepat'.
- pelonggaran: Ia menunjukkan kelajuan animasi yang pudar pada titik yang berbeza. Secara lalai nilainya ialah 'ayunan (lebih perlahan pada permulaan/akhir, dan perlahan di tengah)'. Di samping itu, ia juga berfungsi pada 'linear(kelajuan malar dalam animasi pudar)'.
- panggil balik: Ia mentakrifkan fungsi yang ditentukan pengguna yang dilaksanakan selepas melengkapkan animasi pudar untuk melaksanakan tugas yang ditentukan.
Mari gunakan kaedah yang ditakrifkan di atas secara praktikal.
Kod HTML
Sebelum beralih kepada kaedah 'fadeOut()', lihat kod HTML berikut yang mencipta elemen sampel 'div' yang mana kesan fade-out akan dilakukan:
< butang > fadeOut ( Sembunyi unsur ) butang >< br >< br >< id div = 'myDiv' gaya = 'tinggi: 80px; lebar: 300px; sempadan: 2px pepejal hitam; jidar: auto; penjajaran teks: tengah' >
< h2 > Selamat datang ke Linuxhint h2 >
div >
Dalam baris kod di atas:
- '
teg ” menambah elemen butang. - ' tag ” mencipta elemen div yang mempunyai id “myDiv”, dan digayakan dengan bantuan sifat penggayaan berikut (tinggi, lebar, jidar, jidar, penjajaran teks).
- Di dalam div, ' teg ” menentukan elemen subtajuk pertama tahap 2.
Sekarang, mulakan dengan contoh pertama.
Contoh 1: Cipta Kesan Fade-Out Lancar Dengan Nilai Lalai fadeOut().
Contoh pertama menyembunyikan elemen div yang dipadankan dengan menggunakan kaedah 'fadeOut()' dengan nilai lalainya '400ms':
< skrip >
$ ( dokumen ) . sedia ( fungsi ( ) {
$ ( 'butang' ) . klik ( fungsi ( ) {
$ ( '#myDiv' ) . fadeOut ( ) ;
} ) ;
} ) ;
skrip >Dalam baris kod di atas:
- Pertama, ' sedia() ” kaedah melaksanakan fungsi yang diberikan apabila dokumen HTML/DOM semasa dimuatkan.
- Seterusnya, ' klik() ” kaedah melaksanakan fungsi terpaut apabila butang klik apabila pemilih “butang” yang berkaitan diklik.
- Selepas itu, ' fadeOut() kaedah ” menyembunyikan elemen div diakses yang idnya ialah “myDiv” dalam 400ms iaitu nilai lalai.
Pengeluaran
Adalah diperhatikan bahawa klik butang yang diberikan memudarkan elemen div secara beransur-ansur dalam '400ms'.
Contoh 2: Cipta Kesan Fade-Out Lancar Dengan Parameter 'kelajuan' fadeOut()
Contoh ini menggunakan kaedah 'fadeOut()' dengan nilai terbina dalam (lambat/cepat) parameter 'kelajuan':
< skrip >
$ ( dokumen ) . sedia ( fungsi ( ) {
$ ( 'butang' ) . klik ( fungsi ( ) {
$ ( '#myDiv' ) . fadeOut ( 'lambat' ) ;
} ) ;
} ) ;
skrip >Sekarang, ' fadeOut() ' kaedah melepasi ' lambat nilai ” sebagai parameternya untuk mencipta kesan pudar keluar dengan lancar iaitu menukar keadaan elemen div yang dipilih daripada kelihatan kepada tersembunyi.
Pengeluaran
Ia boleh dilihat bahawa elemen div yang dipilih menyembunyikan perlahan-lahan pada klik butang.
Contoh 3: Cipta Kesan Fade-Out Lancar Dengan Parameter 'tempoh' fadeOut()
Contoh ini menggunakan kaedah 'fadeOut()' dengan bilangan milisaat tertentu sebagai parameter tempohnya:
< skrip >
$ ( dokumen ) . sedia ( fungsi ( ) {
$ ( 'butang' ) . klik ( fungsi ( ) {
$ ( '#myDiv' ) . fadeOut ( 6000 ) ;
} ) ;
} ) ;
skrip >Kini, kaedah 'fadeOut()' menggunakan no milisaat yang ditentukan untuk menyembunyikan elemen yang dipadankan dalam tempoh masa yang diberikan.
Pengeluaran
Output di atas menyembunyikan perubahan elemen div yang diberikan apabila klik butang dalam selang masa tertentu.
Contoh 4: Cipta Kesan Fade-Out Lancar Dengan Fungsi 'panggil balik' fadeOut()
Contoh ini melaksanakan fungsi panggil balik setelah selesai kesan fade-out melalui kaedah 'fadeOut()':
< skrip >
$ ( dokumen ) . sedia ( fungsi ( ) {
$ ( 'butang' ) . klik ( fungsi ( ) {
$ ( '#myDiv' ) . fadeOut ( 4000 , fungsi ( ) {
konsol. log ( 'Elemen div yang diberikan berjaya disembunyikan!' )
} ) ;
} ) ;
} ) ;
skrip >Dalam blok kod yang dinyatakan:
- ' fadeOut() ” kaedah memadamkan elemen div yang dipadankan dalam bilangan milisaat tertentu dan kemudian melaksanakan fungsi “panggilan balik” yang disediakan.
- Di dalam ' panggil balik fungsi ', ' console.log() kaedah ” digunakan untuk memaparkan pernyataan yang ditentukan selepas selesai kesan “fade-out”.
Pengeluaran
Nampak bahawa 'konsol' menunjukkan pernyataan yang ditakrifkan dalam fungsi panggil balik selepas menyembunyikan elemen div yang diberikan.
Contoh 5: Cipta Kesan Fade-Out Lancar Dengan Parameter fadeOut() 'meringankan'
Contoh ini menggunakan kaedah 'fadeOut()' dengan nilai kemungkinan parameter 'ease':
< skrip >
$ ( dokumen ) . sedia ( fungsi ( ) {
$ ( 'butang' ) . klik ( fungsi ( ) {
$ ( '#myDiv' ) . fadeOut ( 4000 , 'linear' ) ;
} ) ;
} ) ;
skrip >Sekarang, ' fadeOut() kaedah ” melaksanakan kesan fade out dalam bilangan milisaat tertentu pada kelajuan malar kerana “ linear ” nilai.
Pengeluaran
Output mengubah keadaan elemen yang diberikan daripada kelihatan kepada tersembunyi pada kelajuan tetap. Itu sahaja untuk melaksanakan kesan 'fade-out' pada elemen.
Kesimpulan
Untuk mencipta kesan pudar yang lancar menggunakan jQuery ' fadeOut() ”, pengguna tidak memerlukan sebarang parameter tambahan. Kaedah ini pudar iaitu menyembunyikan elemen secara beransur-ansur dengan menukar kelegapannya. Jika pengguna perlu melakukan kesan pudar dalam bilangan milisaat tertentu, laksanakan fungsi panggil balik kemudian gunakan parameter 'kelajuan', 'pelonggaran' dan 'panggil balik' dengan kaedah 'fadeOut()'. Siaran ini secara praktikal menerangkan kaedah fadeOut() jQuery untuk mencipta kesan fade-out yang lancar.