Tutorial Belajar jQuery Part 18: Cara Membuat Efek Fade dengan jQuery

Posted on

Di panduan sebelumnya, saya telah membahas cara penggunaan efek hide dan show jQuery. Masih berhubungan dengan efek tampilan HTML, kali ini kita akan mempelajari Cara Membuat Efek Fade dengan jQuery.


Menyusun Efek FadeIn dan FadeOut dengan jQuery

Efek fade hakekatnya mirip dengan efek show dan hide, akan tetapi kali ini element HTML akan disembunyikan dengan mengubah transparasi-nya, yakni dari normal menjadi transparan (tersembunyi), dan sebaliknya.

Untuk membangun efek fade, kita menggunakan 2 buah method, yakni fadeIn() untuk menghadirkan sebuah faktor, dan fadeOut() untuk menyembunyikan sebuah faktor.

Sama seperti method hide() dan show(), kedua method fade ini pun dapat diatur kecepatannya menggunakan keyword “slow”, “fast” atau angka di satuan milisecond.

Mari lihat contoh prakteknya:

Ketika tombol FadeOut di-klik, command jQuery $(“#box”).fadeOut(“slow”) akan dijalankan. Hasilnya, box pink akan berubah secara perlahan menjadi transparan, lalu hilang sepenuhnya. Saya menggunakan argumen “slow” agar efek fadeOut berjalan dengan perlahan.

Ketika tombol FadeIn di-klik, akan dijalankan kode jQuery $(“#box”).fadeIn(“fast”). Sekarang ini ini, box pink akan kembali tampil dengan cepat. Ini karena saya menambahkan argument “fast” untuk method fadeIn().

Silahkan kamu coba dari link codepen dibawah ini:

See the Pen Cara Membuat Efek FadeIn dan FadeOut dengan jQuery by duniailkom (@duniailkom) on CodePen.10206


Method fadeToggle() jQuery

Selaku gabungan dari method fadeIn() dan fadeOut(), jQuery menyediakan method fadeToggle(). Sama seperti efek “toggle” yang kita pelajari sepanjang panduan jQuery ini, guna dari fadeToggle() ialah secara bergantian memunculkan dan menyembunyikan element HTML, tergantung kondisi element dikala ini.

Berikut contoh praktek pemakaian method fadeToggle() jQuery:

See the Pen Cara Membuat Efek FadeIn dan FadeOut dengan jQuery 2 by duniailkom (@duniailkom) on CodePen.10206

Ketika tombol FadeIn/FadeOut di-klik, kotak pink akan bergantian muncul dan sembunyi berselang efek pada kurun waktu 1000 milisecond. Ini sesuai dengan command $(“#box”).fadeToggle(1000).

Di panduan belajar jQuery Duniailkom kali ini kita telah mempelajari cara penggunaan efek fade jQuery. Untuk panduan berikutnya, saya akan masuk ke efek Slide jQuery: Cara Membuat Efek Slide dengan jQuery.


Sumber https://www.duniailkom.com/