//OUTPUT: Animating motion

<New code>

jQuery //INIT: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
— loads jQuery library

jQuery //OUTPUT: $("#animateID").animate({left: "50px"});
— animates to 'left: 50px' position
jQuery //OUTPUT: $("#animateID").animate({top: "50px"});
— animates to 'top: 50px' position
jQuery //OUTPUT: $("#animateID").animate({left: "+=50px"});
— animates 50px to right of current position
jQuery //OUTPUT: $("#animateID").animate({top: "+=50px"});
— animates 50px down from current position

jQuery //OUTPUT: $("#animateID").animate({top: "50px"}, {duration: "fast"} );
— animates quickly
jQuery //OUTPUT: $("#animateID").animate({top: "50px"}, {duration: "slow"} );
— animates slowly
jQuery //OUTPUT: $("#animateID").animate({top: "50px"}, {duration: 400} );
— animation for 400ms (default)

jQuery //OUTPUT: $("#animateID").animate({top: "50px"}, {easing: "linear"} );
— linear movement
jQuery //OUTPUT: $("#animateID").animate({top: "50px"}, {easing: "swing"} );
— 'swing' movement (default)

jQuery //OUTPUT: $("#animateID").stop();
— stops the animation immediately

Let's animate something...

Animation is amazing. One of my animation heroes is Winsor MacKay, who was a cartoonist who made the first really successful animated film, Gertie the Dinosaur [youtube].


This was done with the following code:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>drapak.ca - Computer Programming 12: OUTPUT - Animating motion</title>
        <meta name="description" content="Learn how to animate motion in Javascript">
        <meta name="author" content="Dave Drapak">

        <!-- the next line loads the jQuery library to simplify animation -->
        <!-- it will load faster if it is at the top of your HTML page -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

        <style>
            #animateID {
                /* set the position mode and starting coordinates */
                position:   absolute;
                top:        500px;
                left:       650px;
            }
        </style>
    </head>
    <body>
        <img id="animateID" src="https://upload.wikimedia.org/wikipedia/commons/a/a7/Gertie.jpg">
        <button id="buttonID">Click me to animate!</button>

        <script>
            // OUTPUT: animate the image's position
            var animateImage = function () {  
                console.log('in animateHeader...');
                // jQuery uses $() to select element using CSS-style selectors
                $("#animateID").animate({top: "+=200px"});  // move down 200px from current pos
                $("#animateID").animate({top: "-=200px"});  // move up 200px from current pos
                $("#animateID").animate({left: "-=200px"}); // move left 200px from current pos
                $("#animateID").animate({left: "+=200px"}); // move right 200px from current pos
                $("#animateID").animate({left: "-=200px", top: "-=200px"}); // move diagonally
            }
            
            //INPUT: trigger animateImage when #buttonID is clicked
            document.getElementById("buttonID").onclick = animateImage;
        </script>
    </body>
</html>

Four steps to animating things

  1. Link to the jQuery library in the <head> of your page:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  2. Give the element an ID:
    <p id="animateID">Animate this!</p>
  3. Change the positioning mode of the animated element using CSS:
    position: absolute;
  4. Trigger the animation as Javascript code:
    // move #animateID down 100 pixels
    $("#animateID").animate({top: "+100px"});

Caution about selecting IDs with jQuery!

jQuery uses $("#animateID") instead of document.getElementById("animateID").

You must use $("#animateID")animate({});.
document.getElementById("animateID").animate({}); will not work.

Relative movement

$("#animateID").animate({top: "+=50px"}); // moves "animateID" DOWN

$("#animateID").animate({top: "-=50px"}); // moves "animateID" UP

$("#animateID").animate({left: "+=50px"}); // moves "animateID" RIGHT

$("#animateID").animate({left: "-=50px"}); // moves "animateID" LEFT

Learn more

Live example: Basic jQuery animation