FadeIn FadeOut html text div effect dengan jQuery.

Aplikasi Web 2.0 sekarang telah banyak berkembang. Banyak fitur baru memake AJAX, javascript, dhtml dll  telah dimasukan kedalam aplikasi web untuk membuat mereka lebih menarik bagi user. Salah satu framework yang mengubah cara kita menulis kode di sisi klien adalah jQuery.

Ayo kita lihat contoh simple FadeIn dan FadeOut teks dengan jQuery. Kode ini bisa dengan mudah dipake di komponen html apa aja. FadeIn bekerja dengan mengganti visibility dari komponen text/div/html secara gradual dari transparan ke solid begitu juga sebaliknya untuk FadeOut. Untuk browser yang berbeda ada beberapa cara yang beda untuk mendapatkan fungsi ini. dengan make jQuery kita bisa menghindari permasalahan berbeda browser dan bisa langsung make fitur fadein dan fadeout.

Contoh FadeIn di jQuery

Perhatikan text dalam div.

<div id=“sometext”>

This text will Fade In and Out.

</div>

Nah kita coba buat teks diatas fadein dan fadeout dengan jQuery.


$("#something").fadeOut("slow");
$("#something").fadeOut(2000);
$("#something").fadeOut("slow", function() {alert("Animation done");});


Aku udah tuliskan 3 trik untuk membuat efek fade pada div / text. Di baris pertama div dengan id something perlahan fadeout dengan fungsi fadeout(). disitu saya kasih argumen “slow”, selain itu juga bisa di beri argumen jumlah milidetik di fungsi ini.

fadeout() juga menerima argumen ke dua, yaitu memanggil sebuah fungsi yang akan dijalankan setelah animasi selesai. berikut saya beri contoh handler sederhana yang akan alert setelah animasi.

Dengan cara yang sama kamu juga bisa menerapkan fungsi fade in.


$("#something").fadeIn("slow");
...
$("#something").fadeIn(2000);
...
$("#something").fadeIn("slow", function() {alert("Animation done"); });

$("#something").fadeIn("slow");
...
$("#something").fadeIn(2000);
...
$("#something").fadeIn("slow", function() {alert("Animation done");});

Kode dibawah ini akan membuat efek fade in pada text di tag <p> .


$("p").fadeIn("slow",function(){alert("Animation Done.");});

$(“p”).fadeIn(“slow”,function(){alert(“Animation Done.”);});

Using fadeTo to reach a certain transparency.

Kita bisa make fungsi fadeTo() dari jQuery untuk menset opacity semua elemen yang sesuai ke opacity yang ditentukan dan memanggil fungsi callback setelah animasi selesai.


$("p").fadeTo("slow", 0.5);
...
$("p").fadeTo("slow", 0.5,function(){ alert("Animation Done.");});

$(“p”).fadeTo(“slow”, 0.5);
…
$(“p”).fadeTo(“slow”, 0.5, function(){alert(“Animation Done.”);});