//OUTPUT: Animating motion

<New code>

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

jQuery //OUTPUT: $( "#animateId" ).animate( { left: 50 + "px" } );
— animates to 'left: 50px' position
jQuery //OUTPUT: $( "#animateId" ).animate( { top: 50 + "px" } );
— 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: 50 + "px" }, { duration: "fast" } );
— animates quickly
jQuery //OUTPUT: $( "#animateId" ).animate( { top: 50 + "px" }, { duration: "slow" } );
— animates slowly
jQuery //OUTPUT: $( "#animateId" ).animate( { top: 50 + "px" }, { duration: 400 } );
— animation for 400ms (default)

jQuery //OUTPUT: $( "#animateId" ).animate( { top: 50 + "px" }, { easing: "linear" } );
— linear movement
jQuery //OUTPUT: $( "#animateId" ).animate( { top: 50 + "px" }, { 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.3.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://drapak.ca/cpg/img/Gertie.jpg">
		<button id="buttonId">Click me to animate!</button>

		<script>
			// OUTPUT: animate the image's position
			var animateImage = function () {  
				console.log( 'in animateImage...' );
				// jQuery uses $() to select element using CSS-style selectors
				
				// move down 200px from current pos
				$( "#animateId" ).animate( { top: "+=200px" } );  
				// move up 200px from current pos
				$( "#animateId" ).animate( { top: "-=200px" } );
				// move left 200px from current pos
				$( "#animateId" ).animate( { left: "-=200px" } ); 
				// move right 200px from current pos
				$( "#animateId" ).animate( { left: "+=200px" } ); 
				// move diagonally
				$( "#animateId" ).animate( { left: "-=200px", top: "-=200px" } ); 
			}

			//INPUT: trigger animateImage when #buttonId is clicked
			document.querySelector( "#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.3.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 document.querySelector() internally. This means that it uses also uses CSS selectors such as #imageId in the code. Compare how 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