...

View Full Version : Simple animation with JS in a for..loop.



feedel
07-31-2006, 08:39 PM
Hello,

I tried simple animation like this:

<div id="adContainer" style="position:absolute;top:10px;left:10px;height:100px;width:100px; background:lime;">test</div>

<script type="text/javascript">

adCont=document.getElementById(adContainer);
for(i=1;i<100;i++){
setTimeout("adCont.style.left=i*5+'px'", i*50);
}

</script>

It doesn't work! Div jumps to its destination position instantly. Why is that? Shouldn't last setTimeout be run after 5secs???

coothead
08-01-2006, 01:52 AM
Hi there feedel,

have a look at this example, it might give you some ideas...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
#adContainer {
position:absolute;
top:10px;
left:10px;
line-height:100px;
width:100px;
background-color:lime;
color:black;
text-align:center;
}
-->
</style>

<script type="text/javascript">
<!--

var i=10;
var speed=50;

function move() {
adCont=document.getElementById('adContainer');
adCont.style.left=i+'px';
if(i>500) {
clearTimeout(m);
return;
}
i+=2;
m=setTimeout('move()',speed);
}
window.onload=move;

//-->
</script>

</head>
<body>

<div id="adContainer">test</div>

</body>
</html>

coothead



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum