This tutorial covers how to stop, restart and reset a simple animation.

This tutorial will use the jQuery API .hide(), .show(), .animate() and .stop()  methods.

 

jquery-blank.html

Create a new document: tutorial-9.html

We will start out with the basic jQuery document that was created in Tutorial 1.

Open up the document called jquery-blank.html in a text editor and do a "Save As" into the same directory. Save the document as  tutorial-9.html.


Create the HTML elements

Inside of the <body>...</body> tags we are going to create a little red ball for the animation, a STOP, a GO and a RESET button.

Type the following into your open document:

<body>
    <div id="slideOver"></div>
    <p id="stop">STOP</p><p id="go">GO</p><p id="reset">RESET</p>
</body>


Style the HTML element

Let's add some styling to create the container to hold it all, the box for the visitor to click and then place the balloons out of sight. Above the closing </head> tag, you will see the <style type="text/css">...</style> section. Add the following:

<style type="text/css">
    body {background: url(../sitegraphics/jqz-demo.jpg); padding: 15px;font-family: arial, sans-serif;}
    #slideOver {background: #ff2222; height: 50px; width: 50px; border-radius: 25px;box-shadow:inset -1px -2px 8px #550000;}
    #stop, #reset, #go {position: absolute; bottom: 0%;background: #553333;padding: 6px;color: #fff;cursor: pointer;width: 100px; text-align: center;}
    #reset {left: 150px;background: #333355;}
    #go {background: #335533;}
</style>


Add the jquery code

Go up to the <script>...</script> section in the <head>...</head> section. This is the section with $(document).ready() function already inserted.

<script type="text/javascript">
    $(document).ready(function(){
        $("#stop").hide();
        $("#reset").hide();

        $("#go").click(function(){
            $("#slideOver").animate({
                marginLeft: "90%",
                marginTop: "30%"
            }, 5000);
            $(this).hide();
            $("#stop").show();
            $("#reset").hide();
        });

        $("#stop").click(function(){
            $("#slideOver").stop();
            $(this).hide();
            $("#go").show();
            $("#reset").show();
        });


        $("#reset").click(function() {
            $("#slideOver").animate({
                marginLeft: "0%",
                marginTop: "0%"
            }, 500);
            $("#stop").hide();
            $("#go").show();
        }); 
       
    });  // End document.ready()
</script>


Let's go thru the script step by step:

$("#stop").hide();

this uses the .hide() method to remove the STOP element from being seen on the screen. It sets the inline style to display: none. The element still exists in the DOM and we can use .show() later on to set it to display: inline

$("#reset").hide();

same as above. We are hiding this until later when the ball has moved its position and the visitor wants to put it back

$("#go").click(function(){

set up the .click() function for the GO element

$("#slideOver").animate({

set up animation for the element with id="slideOver", the red ball

marginLeft: "90%",

the ball will move from its current position to a marginLeft of 90%

marginTop: "30%"

the ball will stop when marginTop hits 30%

}, 5000);

the animation will occur for 5 seconds.

$(this).hide();

$(this) is the element that received the action of the click, it will be set to display: none

$("#stop").show();

this element will now appear on the screen with the style added of display: inline

$("#reset").hide();

we are hinding the reset button so that it cannot be clicked on while the ball is moving. The visitor must use STOP first

});

close the .click() function

$("#stop").click(function(){

set up the .click() function for the STOP element

 $("#slideOver").stop();

use the .stop() method to stop the animation from continuing

$(this).hide();

this will set the element that received the action of the click to display: none

$("#go").show();

this will set the GO element to display: inline. It now shows up on the screen

$("#reset").show();

same as above

});

close the .click() function

$("#reset").click(function() {

set up a .click() function for the RESET element

$("#slideOver").animate({

the ball will move back to the original position with the .animate() method

marginLeft: "0%",

back to the left of the screen

marginTop: "0%"

up to the top of the screen

}, 500);

the animation will last 1/2 of a second

$("#stop").hide();

remove the STOP element

$("#go").show();

show the GO element

});

close the .click() function


Test the code

Save the document and open up a new browser window. Type the path to the document in the address bar of the browser. For example:

file:///C:/jquery-tutorials/tutorial-9.html

When you open up the document, you should see something like this.