jQuery Stop

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

Example of Code

<style>
.example-jquery-animation-multiple-queued-div{
        width: 50px;
        height: 50px;
        background: red;
        margin-top: 30px;
        border-style: solid; /* Required to animate border width */
        border-color: #6f40ce;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".example-jquery-animation-multiple-queued-button").click(function(){
        $(".example-jquery-animation-multiple-queued-div")
            .animate({width: "200px"})
            .animate({height: "200px"})
            .animate({marginLeft: "100px"})
            .animate({borderWidth: "10px"})
            .animate({opacity: 0.5});
    });
      $(".example-jquery-stop").click(function(){
    $(".example-jquery-animation-multiple-queued-div").stop();
    alert("slide is stop");
  });
});
</script>
<button type="button" class="example-jquery-animation-multiple-queued-button">Start sliding</button>
<button class="example-jquery-stop">Stop sliding</button>
<div class="example-jquery-animation-multiple-queued-div"></div>

Output