jQuery stop() with Examples

jQueryWeb DevelopmentFront End Technology

The stop() method in jQuery is used to stop an animation before it ends.

Syntax

The syntax is as follows −

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

Above, stopAll clears all animation, whereas gotoEnd is used to specify whether to complete the current animation immediately or not.

Example

Let us now see an example to implement the jQuery stop() method 

 Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      $(".button1").click(function(){
         var div = $("div");
         div.animate({height: 250}, "slow");
         div.animate({left: "+=200",top: "+=100" }, "slow");
         div.queue(function(){
            div.dequeue();
         });
         div.animate({height: 150}, "slow");
         div.animate({left: "10",top: "100" }, "slow");
         $(".button2").click(function(){
            $("div").stop();
         });
      });
   });
</script>
<style>
div {
   width:150px;
   height:150px;
   position:absolute;
   left:10px;
   top:100px;
   background-color:orange;
}
</style>
</head>
<body>
<button class="button1">Begin</button>
<button class="button2">Stop</button>
<div></div>
</body>
</html>

Output

This will produce the following output −

After clicking “Begin”, the animation begins −

After clicking “Stop”, animation halts −

raja
Published on 31-Dec-2019 06:33:50
Advertisements