jQuery Effects - Stop Animations

jQuery Effects - Stop Animations: Learn about the jQuery stop() method, how it works, and its example.
Submitted by Pratishtha Saxena, on September 24, 2022

jQuery stop() Method

Suppose, there is a need to stop the effect that is executing on a particular element. The jQuery clearQueue() method can be used, but it lets complete the effect that is running. Here we need to stop the animation as soon as the user wants. Therefore, for this, a very simple method is called - stop().

The stop() method can be understood by its name itself. The stop() method of jQuery helps to immediately stop the animation and effect that is running on a particular element. This method then and there stops every method executing for that element.

stop() Method Syntax

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

This method takes in two parameters – stopAll & goToEnd. By stopAll it means that all the further animations will be stopped and the queue will be cleared including the running function. By default, this method only stops the first animation in the queue. By goToEnd, it means to complete the running function or not. If yes, then it completes the present animation. By default, this is also false. These both parameters are optional.

Let's see the following example which shows the implementation of the stop() method. When the animation is started, the effects on the image get executed. But as soon as it is stopped, the animations stop immediately. When it is started again, it continues from the point it was stopped.

jQuery stop() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery Effects - Stop</h2>
    <p>Click the button to stop the animations on the image.</p>
    <button id="btn1">Start Animation</button>
    <button id="btn2">Stop Animation</button>
    <hr>
    <img id="myImg" src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=">
    <hr>
    <h3></h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function() {
        $('#btn1').click(function() {
            $('#myImg').animate({
                height: 300,
                width: 400
            }, 3000);
        });
    
        $('#btn2').click(function() {
            $('#myImg').stop(true);
    
        })
    });
  </script>
</html>

Output:

jQuery - Effects: animate() Using Different Ways

jQuery - Effects: Delay

Comments and Discussions!

Load comments ↻