...

View Full Version : Expanding Div Animation w/ setTimeout



Templar
07-01-2006, 04:34 PM
I want to create a div that will increase its height attribute by 200 pixels when a button is pressed. The problem is that I want it to look as though it is animated. I've started with a button and a div that's 300px wide and 100px high. When the button is clicked a function increases the height value then setTimeout launches the same function after 30 milliseconds again and again until the div has a height of 300px. Thanks for your help! Here's the css:


#move
{
position: absolute;
background-color: #000;
left: 40px;
top: 40px;
width: 300px;
height: 100px;
}

and also in the head is the function:


function expand()
{
var x = x++;
document.getElementById("move").style.height=100+x+"px";
if (x>200) {
clearTimeout(t);
var t = 0;}
else {
var t = setTimeout("expand()",30); }
}

and in the body:


<div id="move"></div>
<button onClick="expand()">test</button>

coothead
07-01-2006, 06:53 PM
Hi there Templar,

and a warm welcome to these forums. ;)

Try it like this...

<script type="text/javascript">
<!--
var x=100;
function expand() {
document.getElementById("move").style.height=x+'px';
if(x>200) {
clearTimeout(t);
return;
}
x++;
t=setTimeout('expand()',30);
}
//-->
</script>
coothead

Templar
07-01-2006, 07:19 PM
Thanks, your script works perfectly!
(though I don't see why mine didn't work too)

coothead
07-01-2006, 07:58 PM
Hi there Templar,

though I don't see why mine didn't work too
If you are having problems with a script make use of the 'alert' it may help you pinpoint problems...

<script type="text/javascript">
<!--
var x=x++;
alert(x);
//-->
</script>
coothead



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum