Home » Jquery » Efek jQuery : Animasi Stop – Kode dan Contohnya

Efek jQuery : Animasi Stop – Kode dan Contohnya

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Metode jQuery stop() digunakan untuk menghentikan animasi atau efek sebelum selesai.

Metode jQuery stop()

Metode jQuery stop() digunakan untuk menghentikan animasi atau efek sebelum selesai.

Metode stop() berfungsi untuk semua fungsi efek jQuery, termasuk geser, fading, dan animasi kustom.

Sintaksis:

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

Parameter stopAll opsional menentukan apakah antrian animasi juga harus dikosongkan atau tidak. Defaultnya salah, yang berarti hanya animasi aktif yang akan dihentikan, memungkinkan animasi antrean dilakukan setelahnya.

Parameter goToEnd opsional menentukan apakah animasi saat ini akan segera diselesaikan atau tidak. Default-nya salah.

Jadi, secara default, metode stop() menghentikan animasi saat ini yang sedang dilakukan pada elemen yang dipilih.

Contoh berikut menunjukkan metode stop(), tanpa parameter:

Contoh :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>
<style> 
#panel, #flip {
  padding: 5px;
  font-size: 18px;
  text-align: center;
  background-color: #555;
  color: white;
  border: solid 1px #666;
  border-radius: 3px;
}

#panel {
  padding: 50px;
  display: none;
}
</style>
</head>
<body>
 
<button id="stop">Stop sliding</button>

<div id="flip">Klik untuk menggeser panel </div>
<div id="panel">Hello world!</div>

</body>
</html>

You may also like