jQuery stop() Vs. finish()

The jQuery stop() and finish() methods both pertain to animation control, but with distinct purposes. stop() halts ongoing animations, allowing users to specify whether to clear the queue or jump to the end of the animation. On the other hand, finish() swiftly concludes an animation, ensuring that the element reaches its final state without delay, while also clearing the animation queue.

jQuery stop()

When .stop() is called on an element, the animation that is currently in progress (if any) is promptly terminated. This functionality applies across the spectrum of jQuery effect functions, encompassing sliding, fading, and custom animations. The versatility of the .stop() method allows for precise control over ongoing animations, contributing to a seamless and dynamic user experience.

$div.stop();

When multiple animation methods are invoked on a single element, subsequent animations are queued to execute once the preceding one concludes. The .stop() method, when called, immediately triggers the initiation of the next animation in the queue. Using .stop() without parameters halts the current animation while retaining it in the queue. To both halt the animation and clear it from the queue, the .stop(true) method is appropriate, ensuring smooth management of animation sequences. This approach facilitates precise control over animation queues and their execution within the jQuery framework.

$div.stop(true);
example

The following example will show three button (start, stop and stop(true). When you press start button then the animation will start. When you press stop button, you can see the current animation will stop and it jumped to the next animation , , still leaving it in queue. When you press Stop(true) button to clear the animation queue as well.

run this source code Browser View
jQuery dequeue()
Full Source
<html> <head> <title>jQuery stop example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#btnStart").click(function(){ var div = $("div"); div.animate({height: 600,width: 800}, 2000); div.animate({height: 150,width: 200}, 2000); }); $("#btnStop").click(function(){ var div = $("div"); div.stop(); }); $("#btnStopTrue").click(function(){ var div = $("div"); div.stop(true); }); }); </script> </head> <body> <button id="btnStart">Start </button> <button id="btnStop">Stop </button> <button id="btnStopTrue">Stop(True)</button> <div style="height:150;width:200;background:green;position:absolute;"> jQuery dequeue() </div> </body> </html>

jQuery finish()

The jQuery finish() method serves a comprehensive role: it halts the animation currently in progress, eliminates all queued animations, and ensures the completion of all ongoing animations for the specified elements. When finish() is invoked, jQuery applies the CSS that would have been used if all animations had completed without interruption. In essence, finish() streamlines animations by swiftly concluding them and ensuring the application of the intended CSS, resulting in a polished and consistent appearance for the targeted elements.

Syntax
$("selector").finish([queue]);

If the first argument is provided, only the animations in the queue represented by that string will be stopped.

run this source code Browser View
jQuery finish()
example
<html> <head> <title>jQuery finish() example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#btnStart").click(function(){ var div = $("div"); div.animate({height: 600,width: 800}, 2000); div.animate({height: 50,width: 100}, 2000); }); $("#btnStop").click(function(){ var div = $("div"); div.finish(); }); }); </script> </head> <body> <button id="btnStart">Start </button> <button id="btnStop">Stop </button> <div style="height:150;width:200;background:green;position:absolute;"> jQuery finish() </div> </body> </html>

Conclusion

jQuery's stop() and finish() methods both serve to terminate queued animations. The finish() method, introduced in jQuery 1.9, operates similarly to the old $.stop() method, with a notable distinction: while stop() halts the ongoing animation for matched elements, finish() stops the ongoing animation, clears all queued animations, and ensures the completion of all animations for the designated elements. This difference is crucial, providing developers with a precise tool for swiftly wrapping up animations and harmonizing element appearances in a consistent manner.






Related Topics
  1. Show and Hide Effect in jQuery
  2. Fade effect in jquery
  3. Sliding Effect in jquery
  4. jQuery Effect animate() Method
  1. jQuery queue(), dequeue() and clearQueue()
  2. jQuery Callback Function
  3. jQuery Shake Effect