05 Animating Layers

Animating a single layer

Here's the eval statements of this section.

eval( layerRef + "['shirt1']" + styleRef + ".left = 100") eval( layerRef + "['shirt1']" + styleRef + ".top = 200")

We'll be calling the animation function with this anchor:

<A HREF="javascript: moveShirt(100)">move the shirt</A>

And here's the actual animation:

function moveShirt(shirt1Position) { if (shirt1Position < 201) { shirt1Position ++ } else { // breaks the loop return } // change the layer's position eval ( layerRef + "['shirt1']" + styleRef + ".left = " + shirt1Position ) // pause briefly, then run this function again setTimeout('moveShirt(' + shirt1Position + ')', 1) }

Animating multiple layers

Here's how to move several layers at once through a relatively simple motion.

function moveShirt(shirt1Position, shirt2Position, shirt3Position) { if (shirt1Position < 201) { // change the position of the layers shirt1Position ++ shirt2Position = shirt2Position + 2 shirt3Position = shirt3Position + 3 } else { // breaks the loop return } // change the layers' position eval ( layerRef + "['shirt1']" + styleRef + ".left = " + shirt1Position ) eval ( layerRef + "['shirt2']" + styleRef + ".left = " + shirt2Position ) eval ( layerRef + "['shirt3']" + styleRef + ".left = " + shirt3Position ) // pause briefly, then do it again setTimeout('moveShirt(' + shirt1Position + ',' + shirt2Position + ',' + shirt3Position + ')', 1) }

Another method

Here's how to move several layers at once if you don't know where the layer currently is (or don't care).

<SCRIPT LANGUAGE="JavaScript"> // Global variables for platform branching var isNav, isIE if (parseInt(navigator.appVersion) >= 4) { if (navigator.appName == "Netscape") { isNav = true } else { isIE = true } } ... if (isNav) { document.layers['shirt1'].moveBy(3,7) } else { document.all.['shirt1'].style.pixelLeft = 3 document.all.['shirt1'].style.pixelTop = 7 }