Question

I am using the following code to try and move a simple div element with id=’block’ down a page. but using alerts I see that my move function makes the css top value jump from 0 to 1.78957e+7px on the second call:

function init()
{
var block = $('#block');
block.css( {backgroundColor:'#ff0000',
                position:'absolute',
                top:'0px',
                left:'0px',
                height:'30px',
                width:'30px'});
block.vx = block.vy = 0.0001;
setTimeout(move(block,null),100);
}

function move(obj, t1)
{
if(t1==null)t1=new Date().getTime();
var t2 = new Date().getTime() - t1;
var rel_top = obj.vy*t2;
var rel_left = obj.vx*t2;
obj.css('top','+='+rel_top+'px');
setTimeout(move(obj,t2),100);
}

any suggestions how to make this a smooth movement please?

Answer 1

You should be using this for setTimeout:

setTimeout(function() {move(obj,t2);},100);

Otherwise you are calling the function and using its return value (undefined) as the thing to be called in 100ms.