Difference between calling stop(true,true) and finish method ?
Last Updated :
23 Dec, 2022
Using jQuery, various effects or animations can be performed on DOM elements. These can be simple standard effects provided by the built-in methods of the jQuery library or some custom effects created using the jQuery animate() method. The animate method allows changing the CSS properties of the target element(s) and can be chained multiple times to perform more than one animation.
The state of these animations can be controlled using functions like stop and finish. Both these methods are similar in operation as they are used to stop the animations applied on a particular element, but the finish method has a significant difference as compared to the stop(true, true) method.
stop(true, true): If multiple animations are applied to an element, they are placed in the effects queue for that element. On calling the stop(true, true) method the currently running animation is stopped immediately after jumping to its end state i.e. the CSS properties used in the current animation are set to their target values and the effects queue of that element is cleared, thus removing any further animations applied on the element.
- The optional clearQueue parameter (boolean) is set to true and is used to clear the effects queue of the element
- The optional jumpToEnd parameter (boolean) is set to true that stops the current animation and jumps to its end state
Syntax:
$("selector").stop(clearQueue, jumpToEnd)
finish(): Similar to the stop(true, true) method, the finish() method also stops the currently running animation after jumping to its end value and clears the effects queue of the matched element(s). However, it differs in the way that it causes all the queued animations to jump to their end values as well. This means that the CSS properties of all the queued animations are set to their target values that would have been applied if the animations were allowed to finish naturally.
Syntax:
$("selector").finish([queue])
Note: If the optional queue parameter (string) is available, then only the animations represented by that string will be stopped.
Let’s understand the difference better through the following example.
Example: In this example, the start, stop(true, true), and finish buttons are created to depict the usage of the stop(true, true) and the finish method on the animated text.
HTML
<!DOCTYPE html>
<html>
<head>
<title>stop vs finish</title>
<style>
body {
margin: 15px;
}
#box {
position: relative;
border: 2px dashed darkgreen;
box-sizing: border-box;
padding: 15px;
width: 700px;
height: 400px;
}
.text {
color: green;
position: absolute;
font-size: 18px;
font-weight: bold;
}
#buttons {
display: inline-block;
padding: 10px;
box-sizing: border-box;
position: absolute;
top: 25%;
left: 38%;
}
button {
display: block;
padding: 8px;
margin: 5px;
width: 120px;
font-weight: bold;
letter-spacing: 0.5px;
}
</style>
<script src=
<script>
$(document).ready(function () {
var vertPos = $("#box").height() - 15;
var horzPos = $("#box").width() - 120;
//start animation
$(".start").click(function () {
$(".text")
.clearQueue()
.stop()
.css({ top: 15, left: 15 })
.animate({ top: vertPos }, 2000)
.animate({ left: horzPos }, 2000)
.animate({ top: 15 }, 2000);
});
//stop(true,true)
$(".stopBtn").click(function () {
$(".text").stop(true, true);
});
//finish method
$(".finishBtn").click(function () {
$(".text").finish();
});
});
</script>
</head>
<body>
<div id="box">
<span class="text">GeeksForGeeks</span>
<div id="buttons">
<button class="start">start</button>
<button class="stopBtn">stop(true,true)</button>
<button class="finishBtn">finish</button>
</div>
</div>
</body>
</html>
|
Output:
stop(true, true) vs finish method
Explanation: At first, the start button is clicked to depict the complete animation applied to the text. After that, on starting the animation again, the stop(true, true) button is clicked to stop the currently running animation (animation moving the text to the right) and immediately moves the text to the right of the box i.e. jumps to its end state and clears all the queued animations. Further, after restarting the animation, as soon as the finish button is clicked, the current animation is stopped, the effects queue is cleared and all the queued animations are completed immediately, thus moving the text to its final position (at the top right corner).
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...