How to use jQuery stop function, stop running animation:codingtuting

jQuery stop function CodingTuting Image by Arek Socha from Pixabay

Sometimes we need to stop any function in jQuery in the middle. So How to stop function in jquery?
In this tutorial, we'll learn - How to use jQuery stop function.

Using jQuery stop() method/function, we can stop the currently running function. The stop() function in jQuery is very useful on the animations. It is used to stop the currently running animation.

We can stop the functions like jQuery fadeIn(), jQuery fadeOut(), jQuery slide() and more. We can resume the stoped animation too. This method is also known as jquery stop and resume animation.

Let's see

Syntax:

$(selector).stop(stopAllAnimations, jumpToEnd);

1^st Parameter - stopAllAnimations

It is an "optional" boolean (true or false) parameter. It is used to stop all animations which are in the queue. The default value of this parameter is false.

2^nd Parameter - jumpToEnd

It is an "optional" boolean (true or false) parameter. It is used to complete immediately the currently running animation. The default value of this parameter is false.

We'll understand the use of these parameters in this tutorial.

Example of without parameter:

Start the animation by click on the "Start" button. And stop the animation by clicking the "Stop" button.

Example with parameter:

1) $(selector).stop(true);

Here, stopAllAnimations parameter is set to true.
There are 4 animations here in the queue. left, down, right and top. All queued animations will stop once we click on the "Stop" button.

2) $(selector).stop(false, true);

Here, jumpToEnd parameter is set to true.
There are 4 animations here in the queue. left, down, right and top. It'll complete immediately the current animation and move to the next animation, once we click on the "Stop" button.

Source Code of the above Example

HTML and CSS

<style>
.myBox
{
 background:#ff0000;
 height:100px;
 width:100px;
 position: relative;
 margin-top:20px;
}
</style>

<button id="startAnimation"> Start </button>
<button id="stopAnimation"> Stop </button>

<div class="mybox"></div>

jQuery function

$(document).ready(function(){
    $("#startAnimation").click(function(){
        $(".mybox").animate({ left: "+=300px" }, 2000 );
        $(".mybox").animate({ top: "+=100px" }, 2000 );
        $(".mybox").animate({ left: "-=300px" }, 2000 );
        $(".mybox").animate({ top: "-=100px" }, 2000 );
    });

    $("#stopAnimation").click(function(){
        $(".mybox").stop(false, true);
    }); 
});

We hope you got - How to stop jQuery Function from execution. If there is any bug in this tutorial please let us know in the comment.

We would like your suggestion on any topic. Please suggest us, we'll try to post about that topic as soon as. If you've any query regards the Web Design, Development, etc. Please comment.

Sharing is Caring

Thanks for Reading

Keywords & Queries covered in this tutorials are:

Author : Jignesh Panchal

Hi, I'm Jignesh Panchal. I'm a Web Developer & Designer. I've started this blog to help the programmers using my experience and skills. You will get solutions and tips about Programming, Web Development etc.

How to use jQuery stop function, stop running animation

1st Parameter - stopAllAnimations

2nd Parameter - jumpToEnd