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:
|
1 |
<!DOCTYPE html><br/><html><br/><head><br/><meta charset=UTF-8><br/><title>Belajar jQuery Duniailkom</title><br/><script src=jquery-2.1.4.js></script><br/><script><br/> $(document).ready(function() {<br/> <br/> $(#tombol_fade_out).click(function() {<br/> $(#box).fadeOut(slow);<br/> })<br/> <br/> $(#tombol_fade_in).click(function() {<br/> $(#box).fadeIn(fast);<br/> })<br/> <br/> });<br/> </script><br/> <style><br/> #box {<br/> width: 300px;<br/> height: 80px;<br/> background-color: pink;<br/> border: 2px solid black;<br/> }<br/> </style><br/></head><br/><body><br/><h2>Belajar jQuery Duniailkom</h2><br/> <button id=tombol_fade_out>FadeOut</button><br/> <button id=tombol_fade_in>FadeIn</button><br/><br><br><br/> <div id=box></div><br/></body><br/></html> |
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:
|
1 |
<!DOCTYPE html><br/><html><br/><head><br/><meta charset=UTF-8><br/><title>Belajar jQuery Duniailkom</title><br/><script src=jquery-2.1.4.js></script><br/><script><br/> $(document).ready(function() {<br/> <br/> $(#tombol).click(function() {<br/> $(#box).fadeToggle(1000);<br/> })<br/> <br/> });<br/> </script><br/> <style><br/> #box {<br/> width: 300px;<br/> height: 80px;<br/> background-color: pink;<br/> border: 2px solid black;<br/> }<br/> </style><br/></head><br/><body><br/><h2>Belajar jQuery Duniailkom</h2><br/><button id=tombol>FadeIn/FadeOut</button><br/><br><br><br/><div id=box></div><br/></body> |
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/