jQuery stop() Vs. finish()
jQuery stop()
When .stop() is called on an element, the currently-running animation (if any) is immediately stopped. The stop() method works for all jQuery effect functions , including sliding, fading and custom animations.
$div.stop();
If more than one animation method is called on the same element, the later animations are placed in the effects queue for the element. These animations will not begin until the first one completes. When .stop() is called, the next animation in the queue begins immediately. The .stop() without parameters simply stops the animation, still leaving it in queue. In this case you want .stop(true) to clear the animation queue as well.
$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.
Browser View
jQuery dequeue()
<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()
jQuery finish() method stop the currently-running animation, remove all queued animations, and complete all animations for the matched elements. when you call $.finish() , jQuery applies the same CSS to the given set of elements that would have been applied if all of the animations had been allowed to finish naturally. Syntax
$("selector").finish([queue]);
If the first argument is provided, only the animations in the queue represented by that string will be stopped.
Browser View
jQuery finish()
<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>
jQuery Stop() Vs finish()
jQuery stop() and finish() methods are used to end of all of the queued animations. jQuery finish() method was added in jQuery 1.9 and works similarly to the old $.stop() method with one very important difference: jQuery stop() method stops the currently running animation on the matched elements but jQuery finish() stops the currently running animation, removes all the queued animations and complete all the animations for the matched elements.
Related Topics