Java Reference
In-Depth Information
Animation can give important information the fl air it needs to be easily recognized by your reader, as
well as adding a “that's cool” factor. Performing animation with DHTML follows the same principles
of any other type of animation: You make seemingly insignifi cant changes one at a time in a sequential
order until you reach the end of the animation. Essentially, with any animation, you have the following
requisites:
1.
The starting state
2.
The movement towards the fi nal goal
3.
The end state; stopping the animation
Animating an absolutely positioned element, as you're going to do in this section, is no different. First,
with CSS, position the element at the start location. Then perform the animation up until you reach the
end point, which signals the end of the animation.
In this section, you'll learn how to animate content to bounce back and forth between two points. To do
this, you need one important piece of information: the content's current location.
Are We There Yet?
The DOM in modern browsers exposes the offsetTop and offsetLeft properties of an HTML ele-
ment object. These two properties return the calculated position relative to the element's parent element:
offsetTop tells you the top location, and offsetLeft tells you the left position. The values returned
by these properties are numerical values, so you can easily check to see where your element currently is
in the animation. For example:
var endPointX = 394;
if (element.offsetLeft < endPointX)
{
// Continue animation
}
The preceding code specifi es the end point (in this case, 394) and assigns it to the endPointX variable.
You can then check to see if the element's offsetLeft value is currently less than that of the end point.
If it is, you can continue the animation. This example brings us to the next topic in content movement:
performing the animation.
Performing the Animation
In order to perform an animation, you need to modify the top and left properties of the style object
incrementally and quickly. In DHTML, you do this with periodic function execution until it's time to end
the animation. To do this, use one of two methods of the window object: setTimeout() or setInterval().
This example uses the setInterval() method to periodically move an element.
Try It Out Animating Content
The following HTML page moves an element across the page from right to left:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” >
