Cara Membuat Efek Fade dengan jQuery

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).

Baca Juga

Ali Akbar

Software Developer yang fokus mengembangkan aplikasi berbasis Web dan Desktop. Senang mempelajari teknologi baru terutama di bidang web design dan web development.

View all posts by Ali Akbar →

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *