jQuery Stop Animation And Effects

jQuery stop() method is very useful for stopping the currently running animation before the finishing of the selected element animation.

General Syntax of animation:

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

selector: It denoted the selected HTML element.
stopAll: It is an optional parameter that has a default value that is false which indicates that only stop the current animation and the rest of the animations that exist in the queue will run afterward.
goToEnd: It is also an optional parameter that has by default value is false and it denotes whether or not to complete the current animation immediately.

Source Code

          
            $(document).ready(function () {
  $(".start-animation").click(function () {
    $(".animated-box").animate({ width: 500 }, 2000);
  });
  $(".animated-box").click(function () {
    $(".animated-box").stop();
  });
});

Try it now

Let us use both optional parameters of the stop() method and set it to true.

Source Code

          
            $(document).ready(function () {
  $(".start-animation").click(function () {
    $(".animated-box").animate({ width: 500 }, 2000);
    $(".animated-box").animate({ width: 80 }, 3000);
  });
  $(".animated-box").click(function () {
    $(".animated-box").stop(true, true);
  });
});

Try it now

jQuery Stop

Web Tutorials