BeginnersBook

  • Home
  • Java
    • Java OOPs
    • Java Collections
    • Java Examples
  • C
    • C Examples
  • C++
    • C++ Examples
  • DBMS
  • Computer Network
  • Python
    • Python Examples
  • More…
    • jQuery
    • Kotlin
    • WordPress
    • SEO
    • JSON
    • JSP
    • JSTL
    • Servlet
    • MongoDB
    • XML
    • Perl

jQuery Effects – Stop Animations

Last Updated: May 7, 2019 by Chaitanya Singh | Filed Under: jQuery

jQuery stop() method is used to stop an animation or a jQuery effect before it is finished.

jQuery stop() method Syntax

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

clearQueue is an optional boolean parameter. By default it is false but when set to true, it clears the animation queue, stopping the current and all the queued animations to stop immediately.

goToEnd is an optional boolean parameter. By default it is set to false, but when set to true, it causes currently running animation to immediately complete.

jQuery stop() method Example

In the following example we have two buttons “Start” and “Stop”. The Start button starts the animation, which gradually increases the font size of specified text to 10em, in between if we stop the animation by clicking on the Stop button, it stop the animation immediately and the font size never reaches 10em.

Here in the output screenshot you can see I have stopped the animation in between and the font size is not 10em.

The stop() method is generally useful when the animation or effect speed is slow, then only you get the chance to stop the animation in between, else the effect/animation will complete before you get a chance to stop them, this is the reason I have set the speed to 5000 milliseconds in the following example to slow down the animation speed.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#start").click(function(){
    var para = $("p");
    para.animate({fontSize: '10em'}, 5000);
  });
  $("#stop").click(function(){
    $("p").stop();
  });
});
</script>
</head>
<body>

<h2>jQuery Stop Animation example</h2>
<p>BeginnersBook.com</p>
<button id="start">Start</button>
<button id="stop">Stop</button>
</body>
</html>

Output:
jQuery stop animation example

❮ PreviousNext ❯

Top Related Articles:

  1. jQuery html() method
  2. jQuery slideToggle()
  3. jQuery removeClass() Method
  4. jQuery val()
  5. jQuery fadeIn() Effect

About the Author

I have 15 years of experience in the IT industry, working with renowned multinational corporations. Additionally, I have dedicated over a decade to teaching, allowing me to refine my skills in delivering information in a simple and easily understandable manner.

– Chaitanya

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()
  • jQuery addClass()
  • jQuery hasClass()
  • jQuery removeClass()
  • jQuery toggleClass()
  • jQuery after()
  • jQuery before()
  • jQuery append()
  • jQuery appendTo()
  • jQuery clone()
  • jQuery insertBefore()
  • jQuery insertAfter()
  • jQuery attr()
  • jQuery text()
  • jQuery val()
  • jQuery css()
  • jQuery prepend()
  • jQuery remove()
  • jQuery empty()
  • jQuery detach()

Copyright © 2012 – 2025 BeginnersBook . Privacy Policy . Sitemap