JQuery Stop Animations Example Tutorial

By | 2018-04-01T12:18:28+00:00 September 25th, 2016|jquery|0 Comments

The stop() is one of the animation function in Jquery. The JQuery Stop animation method is used to stop the running annotation.

JQuery Stop Animation :

The JQuery stop animation is used to stop one or more running animations. The stop() method will work on all animation functions including slideUp() slideDown() fade() and etc.

Syntax :

$(target).stop();
$(target).stop(stopAll,end);

Here the stopAll and end, bath parameters are optional. The stopAll parameter specifies that, is the animation queue is cleared or not. By default it will be in false mode this means the stop() method will stop only currently running animation.

The end parameter specifies that, whether the currently running animation is complete till the end or stop at the moment.

JQuery Stop Example :


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>stop demo</title>
<style>
div {
    position: absolute;
    background-color: #027d3a;
    left: 0px;
    top: 30px;
    width: 60px;
    height: 60px;
    margin: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <button id="go">>></button>
    <button id="stop">
        <b>||</b>
    </button>
    <button id="back"><<</button>
    <div class="block"></div>

    <script>
        // Start animation
        $("#go").click(function() {
            $(".block").animate({
                left : "+=200px"
            }, 2000);
        });

        // Stop animation when button is clicked
        $("#stop").click(function() {
            $(".block").stop();
        });

        // Start animation in the opposite direction
        $("#back").click(function() {
            $(".block").animate({
                left : "-=200px"
            }, 2000);
        });
    </script>

</body>
</html>

Happy Learning 🙂

About the Author:

Hi Folks, you have reach this so far, that shows you like what you are learning. Then why don't you support us to improve for bettor tutorials by leaving your valuable comments and why not you keep in touch with us for latest updates on your favorite blog @ facebook , twitter , Or Google+ ,

Leave A Comment