Here is a quick version to play with.
The important thing is to use [window].setInterval() to move the div a
short distance frequently. It's simplest to save status information for
each DIV in a separate object, which I've called moveableDiv.
movediv() now calls moveabit() every 5 milliseconds, which bumps the div
up or down a pixel. Enjoy!
<html><head>
<script language="JavaScript">
function moveableDiv(name, startpoint)
{
this.obj = document.getElementById(name);
this.whereAmI = startpoint;
this.timer = 0;
this.movecount = 0;
}
var md = new Array(2);
function movediv()
{
md[0] = new moveableDiv("up", -20);
md[1] = new moveableDiv("down", 200);
md[0].timer = setInterval("moveabit(md[0], 1, 200)", 5);
md[1].timer = setInterval("moveabit(md[1], -1, 200)", 5);
}
function moveabit(which, howmuch, howmanytimes)
{
if(which.movecount++ == howmanytimes)
{
clearInterval(which.timer);
return;
}
which.whereAmI += howmuch;
if(which.obj.style)
which.obj.style.top = which.whereAmI + "px";
else
which.obj.setAttribute("style", "top: " + which.whereAmI + "px");
}
</script>
<style>div {position:absolute;left:100px;}</style>
</head>
<body>
<div id="up" style="top:-20px">Up</div>
<div id="down" style="top:200px">Down</div>
<a href="javascript
:void(0)" onclick="movediv()">click</a>
</body>
