Fade in dan fade out adalah salah satu fitur JQuery yang membantu memberikan gaya estetika unik pada sebuah elemen. Jika memakai JQuery hanya untuk mengakses fitur ini, saya rasa ini adalah keputusan yang tidak tepat. Kenapa harus menggunakan JQuery, jika kode fade in dan fade out bisa ditulis dalam beberapa baris kode saja.
function fadeOut(elem,dec){ elem.style.opacity = 1; (function fade_out() { if ((elem.style.opacity = parseFloat(elem.style.opacity) - dec) > 0) { requestAnimationFrame(fade_out); } })(); } // fade in function fadeIn(elem,inc){ elem.style.opacity = 0; (function fade_in() { if ((elem.style.opacity = parseFloat(elem.style.opacity) + inc) < 1) { requestAnimationFrame(fade_in); } })(); }
Dulu, fade in dan fade out bisa diimpleentasikan dengan timer ( setInterval() ), kali ini HTML5 memiliki standar baru yang diciptakan khusus untuk menangani pergerakan objek semacam animasi, yaitu dengan requestAnimationFrame(). Pada dasarnya fungsi ini mirip seperti thread yang dapat berjalan secara loop untuk memperbarui gambar seiring berjalannya waktu.
Dengan API ini, membuat elemen beranimasi jauh lebih mudah daripada harus menggunakan interval timer.
<html> <head> <script type='text/javascript'> //fade out function fadeOut(elem,dec){ elem.style.opacity = 1; (function fade_out() { if ((elem.style.opacity = parseFloat(elem.style.opacity) - dec) > 0) { requestAnimationFrame(fade_out); } })(); } // fade in function fadeIn(elem,inc){ elem.style.opacity = 0; (function fade_in() { if ((elem.style.opacity = parseFloat(elem.style.opacity) + inc) < 1) { requestAnimationFrame(fade_in); } })(); } </script> </head> <body> <span id='target' onclick='fadeOut(this,0.05);'>TARGET</span> </body> </html>
Pada fungsi di atas, parameter inc / dec digunakan sebagai penentu kecepatan perubahan atribut opacity. Semakin besar, semakin cepat animasi berjalan. Parameter elem, adalah elemen terpilih yang ingin diberi perlakuan. Jika belum tahu, caranya bisa dengan melalui onclick dan memberikan argumen this (konteks dari objek yang sedang di-klik). Cara lainnya, bisa menggunakan bantuan document.getElementById() atau metode semacamnya.
DEMO
KLIK SAYA
Semoga bermanfaat...
0 comments