That’s how to use timers for long periods of time, but we can also set timers to extremely short periods of time, on the order of just a few milliseconds. This is useful for animation effects. Timers combined with style changes can make very appealing animations. For example, there is a style called “opacity” that sets the transparency of an element. We can use this to fade out one image and then fade in the next.
Go ahead and type this into the URL bar:
javascript:gallery.imageFrame.parentNode.style.opacity=.5
You should see the image and the caption fade to 50% opacity. Change that number to 0 and the image and caption will fade completely. Put it back to 1 and the image and caption will return to full strength.
Parent node
The “parentNode” of an element is the element that surrounds it, its immediate parent. The parentNode of gallery.imageFrame is the <div> tag that encloses it. By setting that DIV element’s opacity, the opacity of everything contained by the DIV is also affected.
Related Pages
