Cara Menghentikan Animasi dengan jQuery

Animasi yang menumpuk saat pengguna menggerakkan kursor dengan cepat bisa terlihat aneh dan tersendat. Solusinya adalah menghentikan animasi sebelumnya. Artikel ini membahas cara menghentikan animasi dengan jQuery (stop).

Metode .stop()

<script>
$("#menu").hover(
    function() { $(this).stop().slideDown(); },
    function() { $(this).stop().slideUp(); }
);
</script>

Memanggil .stop() sebelum animasi baru mencegah antrean animasi menumpuk.

Contoh Kasus: Menu Dropdown yang Responsif

<script>
$(".dropdown").hover(
    function() { $(this).find(".submenu").stop(true, true).fadeIn(); },
    function() { $(this).find(".submenu").stop(true, true).fadeOut(); }
);
</script>

Argumen stop(true, true) menghapus antrean animasi dan langsung menyelesaikan yang sedang berjalan, membuat menu terasa sangat responsif.

Kesimpulan

Gunakan .stop() sebelum memulai animasi baru agar efek hover terasa responsif dan tidak tersendat. Gunakan stop(true, true) untuk menu dropdown yang perlu reaksi cepat.

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 *