Posting ini akan menjelaskan implementasi praktis metode fadeOut() jQuery untuk menciptakan efek fade-out yang halus.
Bagaimana Cara Membuat Efek Fade-Out yang Halus Menggunakan Metode fadeOut() jQuery?
jQuery's “ memudar() Metode ” menyembunyikan elemen yang dipilih secara bertahap dengan mengurangi opacitynya. Metode ini mengubah status elemen yang dipilih dari terlihat menjadi tersembunyi. Elemen tersembunyi tidak muncul di halaman web sampai pengguna menampilkannya lagi menggunakan “ memudar() ' metode.
Sintaksis
$ ( pemilih ) . memudar ( kecepatan, pelonggaran, panggilan balik ) ;
Sintaks di atas mendukung parameter opsional berikut untuk menyesuaikan efek fade-out:
- kecepatan: Ini menentukan kecepatan efek memudar dalam milidetik. Secara default nilainya adalah “400ms”. Selain itu, ini juga mendukung dua nilai bawaan “lambat” dan “cepat”.
- pelonggaran: Ini menunjukkan kecepatan animasi memudar pada titik yang berbeda. Secara default nilainya adalah “swing (lebih lambat di awal/akhir, dan lambat di tengah)”. Selain itu, ia juga bekerja pada “linier (kecepatan konstan dalam animasi memudar)”.
- panggilan balik: Ini mendefinisikan fungsi yang ditentukan pengguna yang dijalankan setelah menyelesaikan animasi fading untuk melakukan tugas yang ditentukan.
Mari kita gunakan metode yang dijelaskan di atas secara praktis.
Kode HTML
Sebelum beralih ke metode “fadeOut()”, lihat kode HTML berikut yang membuat contoh elemen “div” di mana efek fade-out akan dilakukan:
< tombol > memudar ( Bersembunyi Elemen ) tombol < saudara < saudara >< id div = 'Div saya' gaya = 'tinggi: 80 piksel; lebar: 300 piksel; batas: 2 piksel hitam pekat; margin: otomatis; perataan teks: tengah' >
< h2 > Selamat datang di Linuxhint h2 >
div >
Pada baris kode di atas:
- “
” tag menambahkan elemen tombol. - “ ” Tag membuat elemen div yang memiliki id “myDiv”, dan ditata dengan bantuan properti penataan berikut (tinggi, lebar, batas, margin, perataan teks).
- Di dalam div, “ ” tag menentukan elemen subjudul pertama level 2.
Sekarang, mulailah dengan contoh pertama.
Contoh 1: Membuat Efek Fade-Out Halus Dengan Nilai Default fadeOut()
Contoh pertama menyembunyikan elemen div yang cocok dengan memanfaatkan metode “fadeOut()” dengan nilai default “400ms”:
< naskah >
$ ( dokumen ) . siap ( fungsi ( ) {
$ ( 'tombol' ) . klik ( fungsi ( ) {
$ ( '#Div Saya' ) . memudar ( ) ;
} ) ;
} ) ;
naskah >Pada baris kode di atas:
- Pertama, “ siap() Metode ” menjalankan fungsi yang diberikan ketika dokumen HTML/DOM saat ini dimuat.
- Selanjutnya, “ klik() Metode ” menjalankan fungsi tertaut setelah tombol diklik ketika pemilih “tombol” yang terkait diklik.
- Setelah itu, “ memudar() Metode ” menyembunyikan elemen div yang diakses yang idnya adalah “myDiv” dalam 400 md yaitu nilai default.
Keluaran
Terlihat bahwa klik tombol yang diberikan memudarkan elemen div secara bertahap dalam “400ms”.
Contoh 2: Membuat Efek Fade-Out Halus Dengan Parameter “kecepatan” fadeOut()
Contoh ini menggunakan metode “fadeOut()” dengan nilai bawaan (lambat/cepat) dari parameter “kecepatan”:
< naskah >
$ ( dokumen ) . siap ( fungsi ( ) {
$ ( 'tombol' ) . klik ( fungsi ( ) {
$ ( '#Div Saya' ) . memudar ( 'lambat' ) ;
} ) ;
} ) ;
naskah >Sekarang, “ memudar() ” metode melewati “ lambat ” nilai sebagai parameternya untuk menciptakan efek fading out dengan lancar, yaitu mengubah status elemen div yang dipilih dari terlihat menjadi tersembunyi.
Keluaran
Terlihat bahwa elemen div yang dipilih bersembunyi perlahan saat tombol diklik.
Contoh 3: Membuat Efek Fade-Out Halus Dengan Parameter “durasi” fadeOut()
Contoh ini menerapkan metode “fadeOut()” dengan jumlah milidetik tertentu sebagai parameter durasinya:
< naskah >
$ ( dokumen ) . siap ( fungsi ( ) {
$ ( 'tombol' ) . klik ( fungsi ( ) {
$ ( '#Div Saya' ) . memudar ( 6000 ) ;
} ) ;
} ) ;
naskah >Sekarang, metode “fadeOut()” menggunakan jumlah milidetik yang ditentukan untuk menyembunyikan elemen yang cocok dalam durasi waktu tertentu.
Keluaran
Output di atas menyembunyikan perubahan elemen div tertentu setelah klik tombol dalam interval waktu tertentu.
Contoh 4: Membuat Efek Fade-Out Halus Dengan Fungsi “callback” fadeOut()
Contoh ini mengeksekusi fungsi panggilan balik setelah selesainya efek fade-out melalui metode “fadeOut()”:
< naskah >
$ ( dokumen ) . siap ( fungsi ( ) {
$ ( 'tombol' ) . klik ( fungsi ( ) {
$ ( '#Div Saya' ) . memudar ( 4000 , fungsi ( ) {
menghibur. catatan ( 'Mengingat elemen div berhasil disembunyikan!' )
} ) ;
} ) ;
} ) ;
naskah >Di blok kode yang dinyatakan:
- “ memudar() Metode ” menghilangkan elemen div yang cocok dalam jumlah milidetik tertentu dan kemudian menjalankan fungsi “panggilan balik” yang disediakan.
- Di dalam ' panggilan balik ” fungsi, “ konsol.log() Metode ” diterapkan untuk menampilkan pernyataan yang ditentukan setelah selesainya efek “fade-out”.
Keluaran
Terlihat bahwa 'konsol' menampilkan pernyataan yang ditentukan dalam fungsi panggilan balik setelah menyembunyikan elemen div yang diberikan.
Contoh 5: Membuat Efek Fade-Out Halus Dengan Parameter “easing” fadeOut()
Contoh ini menerapkan metode “fadeOut()” dengan kemungkinan nilai parameter “easing”:
< naskah >
$ ( dokumen ) . siap ( fungsi ( ) {
$ ( 'tombol' ) . klik ( fungsi ( ) {
$ ( '#Div Saya' ) . memudar ( 4000 , 'linier' ) ;
} ) ;
} ) ;
naskah >Sekarang, “ memudar() Metode ” melakukan efek fade out dalam jumlah milidetik tertentu dengan kecepatan konstan karena “ linier ' nilai.
Keluaran
Outputnya mengubah status elemen tertentu dari terlihat menjadi tersembunyi dengan kecepatan konstan. Itu saja untuk menerapkan efek “fade-out” pada elemen.
Kesimpulan
Untuk membuat efek fade-out yang halus menggunakan “ memudar() ”, pengguna tidak memerlukan parameter tambahan apa pun. Metode ini memudar yaitu menyembunyikan elemen secara bertahap dengan mengubah opasitasnya. Jika pengguna perlu melakukan efek fade-out dalam jumlah milidetik tertentu, jalankan fungsi callback lalu gunakan parameter “speed”, “easing”, dan “callback” dengan metode “fadeOut()”. Posting ini secara praktis menjelaskan metode fadeOut() jQuery untuk pembuatan efek fade-out yang halus.