Metode stop() pada jQuery

Metode stop() pada jQuery dapat digunakan untuk menghentikan animasi atau efek jQuery yang sedang berjalan pada elemen yang dipilih.

Penulisan dasar dari metode stop() adalah sebagai berikut:

$(selector).stop(stopAll, goToEnd);


Parameter dalam Syntax atau contoh penulisan di atas memiliki arti sebagai berikut:
  • Parameter stopAll adalah opsional Boolean (true dan false) yang menentukan apakah akan menghapus animasi atau tidak. Nilai defaultnya adalah false, artinya, hanya animasi yang sedang berjalanlah yang akan dihentikan, animasi lainnya akan tetap dalam antrian dan akan berjalan setelahnya.
  • Parameter goToEnd adalah opsional Boolean menentukan apakah animasi tersebut akan segera diselesaikan atau tidak. Nilai defaultnya adalah false.

Berikut adalah contoh sederhana yang menunjukkan metode stop() di mana kalian dapat menjalankan dan menghentikan animasi ketika tombol di klik:

<script>
    $(document).ready(function(){
        // Animasi dimulai
        $(".tombol-start").click(function(){
            $("img").animate({left: "+=150px"}, 2000);
        });

        // Menghentikan animasi
        $(".tombol-stop").click(function(){
            $("img").stop();
        });

        // Menjalankan animasi dengan arah yang berbeda
        $(".tombol-back").click(function(){
            $("img").animate({left: "-=150px"}, 2000);
        });

        // Reset ke default
        $(".tombol-reset").click(function(){
            $("img").animate({left: "0"}, "fast");
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Catatan: Metode stop() dapat bekerja pada semua efek jQuery seperti Fading, Sliding, animasi Show/Hide serta efek animasi Custom.

Berikut adalah contoh lain dari metode stop() di mana, jika kalian mengklik tombol "Toggle Slide" lagi setelah menjalankan animasi tetapi sebelum selesai, animasi akan dimulai dengan arah yang berlawanan secara langsung dari titik awal:

<script>
    $(document).ready(function(){
        // Menghentikan dan Toggle animasi slide
        $(".toggle-btn").on("click", function(){
            $(".box").stop().slideToggle(1000);
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Membuat Efek Hover Menjadi Smooth

Saat membuat efek animasi hover, salah satu masalah umum yang mungkin akan kalian hadapi adalah animasi ganda, ketika kalian mengarahkan dan memindahkan Coursor dengan cepat. Dalam situasi seperti ini, Event mouseenter atau mouseleave akan dipicu dengan cepat sebelum animasi selesai. Untuk menghindari masalah tersebut dan membuat efek hover yang bagus dan smooth, kalian bisa menambahkan stop(true, true) ke dalam metode Chain seperti berikut:

<script>
    $(document).ready(function(){
        $(".box").hover(function(){
            $(this).find("img").stop(true, true).fadeOut();
        }, function(){
            $(this).find("img").stop(true, true).fadeIn();
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Catatan: Metode stop(true, true) menghapus semua animasi yang antri dan melompati animasi saat ini ke nilai akhir.

0 Komentar