1. Technology
This is a web page object.
move

Web Page Animation

10. Speed of Movement

clr gif

In each of our movements so far we have had the object move by two pixels every 50/1000ths of a second. To adjust the speed at which the object moves we need only change the second parameter of the setTimeout function to a different value. To make the object move twice as fast we would change it as follows:

setTimeout('mover()',25);

To make the object move slower we would increase this value instead of decreasing it.

All of the other code for the animation would remain unchanged since we are only redefining the end position and direction of movement.

If you want to make changing the speed of the object easier then simply substitute a variable called "speed" for the fixed value and assign the value to it at the top of the script.

setTimeout('mover()',speed);

The variable can be defined either as a number to substitute straight into the function - in which case a smaller number means faster and a larger number means slower - or you can manipulate the value to allow a number of moves per second to be specified instead of the delay between moves.

var speed = 50;
speed = Math.round(1000/speed);

©2014 About.com. All rights reserved.