jQuery Stop()

❮ Previous Next ❯

The jQuery stop() function is used to halt animations or effects before they're completed.

jQuery stop() Method

The jQuery stop() function is used to halt an animation or effect before it completes.

The stop() function can be used with various jQuery animation effects, like sliding, fading, and custom animations.

Syntax:

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

The "stopAll" option lets you decide whether to clear the animation queue or not. By default, it's set to "false," meaning only the current animation stops. This way, any animations waiting in line can still run afterward.

You can use the "goToEnd" option to decide if you want to finish the ongoing animation right away or not. By default, it's set to "false."

In the usual case, when you use the stop() method, it immediately stops the animation that's currently happening on the chosen item.

In this example, we'll show you how to use the stop() method without any additional settings:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
    <script>
      $(document).ready(function() {
        $("#flip").click(function() {
          $("#panel").slideDown(5000);
        });
        $("#stop").click(function() {
          $("#panel").stop();
        });
      });
    </script>
    <style>
      #panel,
      #flip {
        padding: 5px;
        font-size: 18px;
        text-align: center;
        background-color: #555;
        color: white;
        border: solid 1px #666;
        border-radius: 3px;
      }

      #panel {
        padding: 50px;
        display: none;
      }
    </style>
  </head>
  <body>
    <button id="stop">Stop sliding</button>
    <div id="flip">Click to slide down panel</div>
    <div id="panel">Hello world!</div>
  </body>
</html>

❮ Previous Next ❯

jQuery

jQuery | Syntax

jQuery | Selectors and Event Methods

jQuery Selectors

jQuery Events

jQuery HTML/CSS

jQuery Stop()

jQuery stop() Method

Web Development