Efek fade memberi transisi halus saat elemen muncul atau hilang, membuat antarmuka terasa lebih halus. Artikel ini membahas cara membuat efek fade dengan jQuery (fadeIn, fadeOut).
fadeIn(), fadeOut(), fadeToggle()
<script>
$("#kotak").fadeOut(); // memudar hilang
$("#kotak").fadeIn(); // memudar muncul
$("#kotak").fadeToggle(); // gabungan keduanya
</script>
Contoh Kasus: Notifikasi yang Muncul dan Hilang Halus
<script>
function tampilNotif(pesan) {
$("#notif").text(pesan).fadeIn();
setTimeout(function() {
$("#notif").fadeOut();
}, 3000); // hilang setelah 3 detik
}
</script>
Mengatur Kecepatan dan Callback
<script>
$("#kotak").fadeOut(1000, function() {
$(this).remove(); // hapus setelah memudar
});
</script>
fadeTo untuk Transparansi Tertentu
<script>
$("#kotak").fadeTo("slow", 0.5); // pudar ke 50% transparan
</script>
Kesimpulan
Gunakan fadeIn(), fadeOut(), dan fadeToggle() untuk transisi halus, ideal untuk notifikasi. Fungsi callback berguna untuk menghapus elemen setelah memudar, dan fadeTo() untuk transparansi tertentu.
Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi jQuery (api.jquery.com).

