Aloha.

Okay so I'm not in the mood to have to write a million functions and set time-outs and intervals and all of that.

So here I am trying to achieve a simple Javascript animation using just the while loop in one function.

1. The function is supposed to read the name of the layer to affect.

2. Then it records the layer's current height and inner-HTML.

3. Then it moves the layer into place and simultaneously...

4. ...makes its height zero and clears its inner-HTML.

5. Then the while loop is supposed to incrementally increase the layer's height until it's back to its initial value.

6. Finally, the inner-HTML is restored to its recorded value.

The over-all effect is meant to be that of an unsliding menu.



Here is my Javascript...

Code JavaScript:
function toggleDrawer(drawer_ID,drawer_XPos,drawer_YPos)
	{
	drawer_FinalHeight = (document.getElementById(drawer_ID).style.height);
	drawer_FinalContents = (document.getElementById(drawer_ID).innerHTML);
	drawer_CurrentHeight = ('0');
	drawer_CurrentContents = ('');
 
	document.getElementById(drawer_ID).style.left = drawer_XPos+"px";
	document.getElementById(drawer_ID).style.top = drawer_YPos+"px";
 
	document.getElementById(drawer_ID).innerHTML = drawer_CurrentContents;
 
	while (drawer_CurrentHeight+"px" <= drawer_FinalHeight)
		{
    	document.getElementById(drawer_ID).style.height = drawer_CurrentHeight+"px";
		drawer_CurrentHeight = (drawer_CurrentHeight + 1);
		wait(5000);
		}
	}

...here is my HTML...
Code HTML4Strict:
				<!-- Drawer2 Layers -->
				<div id="Drawer2">
					<div id="Drawer2_Services">Services</div>
					<div id="Drawer2_Products">Products</div>
					<div id="Drawer2_Articles">Articles</div>
				</div>
				<!-- End Drawer2 Layers -->

...and here is my CSS...
Code CSS:
#Drawer2{position:absolute;}
#Drawer2_Services{position:absolute; left:0px; top:0px; width:180px; height:300px; background:#990000;}
#Drawer2_Products{position:absolute; left:0px; top:0px; width:180px; height:200px; background:#990000;}
#Drawer2_Articles{position:absolute; left:0px; top:0px; width:180px; height:100px; background:#990000;}



Please give this a try yourself.

For whatever reason, even though I have that while loop with that wait(5000); command, it appears that the loop runs superfast and restores the layer's height in a millisecond.

It therefore doesn't look animated at all... it looks as though the layer instantly moved and nothing else.

Can anyone follow my hair-brained maddness?? Can anyone give me any pointers to get this working??



Many thanks in advance.