Javascript - setInterval to change element's position

Question

I'm trying to work out how to move an element across the screen. I don't want to use JQuery's animate() method because I need more precise control. Here is the basic idea:

http://jsfiddle.net/9RLkJ/

setInterval(function() {
    var e = document.getElementById("aDiv");
    // Increase the top position by 1 pixel
    e.style.top = '+1px';
    // If the top position is greater than 100px, set it to 100px
    if (parseInt(e.style.top) > 100) { e.style.top = '100px'; }
}, 1000);

Thank you.

Answer 1

var e = document.getElementById("aDiv");
var s = 1;
setInterval(function(){
    var eLeftPos = e.offsetLeft;
    e.style.left = (eLeftPos + s) + 'px';

}, 1000);

The above code will move the box to right;

working demo move the box to bottom

Answer 2

var top= document.getElementById("aDiv").style.top; setInterval(function() { top += 1; var e = document.getElementById("aDiv"); // Increase the top position by 1 pixel e.style.top = top + 'px'; // If the top position is greater than 100px, set it to 100px if (parseInt(e.style.top) > 100) { e.style.top = '100px'; } }, 1000);