Tuesday , January 24 2017
Home / jquery / JQuery Stop Animations Example Tutorial

JQuery Stop Animations Example Tutorial

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 chandrashekhar

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+ ,

Check Also

JQuery Remove Elements Example

In this tutorial we  are going to understand JQuery Remove Elements. Remove Elements in JQuery …

Leave a Reply

Your email address will not be published. Required fields are marked *