jQuery is a JavaScript library that provides multiple features and tools to handle our HTML document. It is widely used as it is faster and more efficient in performing web development-related tasks, including object animations and event handling. To use jQuery, we have to include its library in our HTML document using the following code:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
In this Answer, we will discuss how we can use jQuery's stop() function.
stop() functionWe use the jQuery stop() function to stop the animations which are currently in execution or are in the animation queue and are to be executed next.
The stop() function is useful in scenarios we want to control the animation behavior on our own without waiting for it to end naturally. It can also help us eliminate queued animations, and it stops the execution of current and queued animations. Queued animations refer to the animations that are executed in the sequence they were entered in the queue.
The syntax for the stop() function is as follows:
$(selector).stop();
selector : This is the element we want to execute stop() function on.
The stop() function accepts two optional parameters.
$(selector).stop(clear, jump);
clear: It means we want to clear the animation queue. We select its value true if we want to clear the animation queue. The default value is false.
jump: It means we want to jump directly to the end state of the element. We select its value to be true if we want to jump to the end. Otherwise, it is set to false by default.
The following code examples will help us better understand how the stop() function works.
stop() without parametersThe following code demonstrates how to use stop() function with no parameters:
Line 1: We use the $(document).ready function so our code is executed implicitly after our HTML document has loaded completely.
Line 3–5: When the button with the id startButton is clicked, we call the function having our animations code. We apply animation to our element with the class box by using the animate() function. We animate the left property to move our box to the right until we reach 100% of the container width. Then we set the animation duration to 5000 milliseconds.
Line 7–9: When the element with the stopButton id is clicked, we stop the animation using the stop() function.
stop() with parametersThe following code demonstrates how to use stop() function with parameters:
Line 1: We use the $(document).ready function so our code is executed implicitly after our HTML document has loaded completely.
Line 3: When the button with id startButton is clicked, we call the function having our animations code.
Line 4: We apply the first animation to animate the width property. We set the animation duration to 600 milliseconds.
Line 5: We apply the second animation to animate the height property. We set the animation duration to 600 milliseconds.
Line 8–10: When the element with stopButton id is clicked, we stop the animation using the stop() function. We call it with the two true parameters. The first parameter clears the animation queue so no further animations happen, while the second one skips the execution of all animations and jumps directly to the end state of the element.
We use the stop() function in jQuery to stop current running animations on selected elements. It gives us control over our animations.
Free Resources