jquery
  1. jquery-stop
PreviousNext

JQuery stop()

The stop() method in jQuery is used to stop the execution of an animation or effect that is currently running.

Syntax

The syntax for the stop() method is as follows:

$(selector).stop(stopAll,goToEnd);
  • The selector parameter specifies the element(s) to stop the animation on.
  • The stopAll parameter is optional and specifies whether to stop the animation for all elements in the selector or just the first one. It can have a boolean value of true or false. The default value is false.
  • The goToEnd parameter is optional and specifies whether to immediately complete the animation and jump to the end state. It can have a boolean value of true or false. The default value is false.

Use

The stop() method is commonly used when you need to interrupt and stop an animation or effect, either because the user interacts with the page or because some other event occurs that requires the animation to be stopped.

Example

Here is an example of how to use the stop() method to interrupt and stop a simple animation:

<!DOCTYPE html>
<html>
<head>
    <title>Stop function example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: relative;
            animation: mymove 5s infinite;
        }
        @keyframes mymove {
            0% {top: 0px;}
            50% {top: 200px;}
            100% {top: 0px;}
        }
    </style>
</head>
<body>
    <button id="stop-btn">Stop Animation</button>
    <div></div>

    <script>
        $(document).ready(function(){
            $("#stop-btn").click(function(){
                $("div").stop();
            });
        });
    </script>
</body>
</html>
Try Playground

In this example, we have a simple animation of a blue square moving up and down using keyframe animation. When the user clicks the "Stop Animation" button, the animation is immediately stopped using the stop() method.

Summary

The stop() method in jQuery is a useful tool for stopping an animation or effect that is currently running. It can have optional parameters to determine which elements to stop the animation on and whether to jump to the end state immediately. Use this method to provide better interactivity and user experience on your website or web application.

AnimateCallback
Published on: