jQuery : Stop Animation

Metode stop()

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

Sintaks dasar metode jQuery stop() dapat diberikan dengan:

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

Parameter dalam sintaks di atas memiliki arti sebagai berikut:

  • Parameter stopAll Boolean opsional menentukan apakah akan menghapus queued animation atau tidak. Nilai default false, itu berarti animasi yang saat ini berjalan akan dihentikan, animasi lainnya dalam queued akan berjalan setelahnya.
  • Parameter Boolean goToEnd opsional menentukan apakah akan segera menyelesaikan animasi saat ini. Nilai default false.

Berikut adalah contoh sederhana yang menunjukkan metode jQuery stop() dalam kasus nyata di mana kalian dapat memulai dan menghentikan animasi dengan mengklik tombolnya.

<script type="text/javascript">
$(document).ready(function(){
    // Start animation
    $(".start-btn").click(function(){
      $("img").animate({left: "+=150px"}, 2000);
    });
 
    // Stop running animation
    $(".stop-btn").click(function(){
      $("img").stop();
    });
    
    // Start animation in the opposite direction
    $(".back-btn").click(function(){
      $("img").animate({left: "-=150px"}, 2000);
    });
 
    // Reset to default
    $(".reset-btn").click(function(){
      $("img").animate({left: "0"}, "fast");
    });
});
</script>

Berikut ini satu lagi contoh metode di mana jika kalian mengklik tombol “Slide Toggle” lagi setelah memulai animasi tetapi sebelum animasi tersebut selesai, animasi akan dimulai dalam arah yang berlawanan segera dari titik awalnya.

<script type="text/javascript">
$(document).ready(function(){
    // Kill and toggle the current sliding animation
    $(".toggle-btn").on("click", function(){
        $(".box").stop().slideToggle(1000);
    });
});
</script>
Membuat Smooth Hover Effect

Saat membuat efek animasi hover, salah satu masalah umum yang mungkin kalian hadapi adalah multiple queued animation, ketika kalian menempatkan dan menghapus kursor mouse dengan cepat. Sebab, dalam situasi ini event mouseenter atau mouseleave dipicu dengan cepat sebelum animasi selesai. Untuk menghindari masalah ini dan membuat efek hover yang bagus dan halus, kalian bisa menambahkan stop(true, true) ke metode chain, seperti ini:

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

Catatan: Metode jQuery stop(true, true) menghapus semua queued animasi dan melompatkan animasi saat ini ke nilai akhir.