jQuery Stop


The jQuery stop() method is used to stop the animations or effects that are currently running on the selected elements before it finished.

Syntax

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

Parameters

stopAll - This parameter is an optional boolean parameter. It defaults to false, but when set to true.

goToEnd - This parameter is an optional boolean parameter. It defaults to false, but when set to true.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".btn1").click(function(){
		$(".box").animate({
          marginLeft: "+=200px",
        }, 3000);
    });
	$(".btn2").click(function(){
		$(".box").stop();
    });
	$(".btn3").click(function(){
		$(".box").animate({
          marginLeft: "0px",
        }, 3000);
    });
});
</script>
<style>
    .box{
        width: 100px;
        height: 100px;
        background: #44BCA3;
        margin-top: 30px;
    }
</style>
</head>
<body>
 <div class="box"></div>
  <button class="btn1">Start</button>
  <button class="btn2">Stop</button>
  <button class="btn3">Back</button>
</body>
</html>