Question

I know there is a .animate() function in jQuery, however i want to play around writing my own!

Ive got this script:

var ball = $("#ball");
var p = $("#ball").position();

for(;;){
    $("#ball").css("left", ++p.left);
    if ( p.left == 400 ){
        break;
    }
}

with these elements:

#board { height:500px; width:500px; background-color: gray; position:relative;}
#ball{ height: 50px; width:50px; background-color: red; position:absolute;}

<div id="board">
    <div id="ball"></div>
</div>

Now what i wanna see when i open the browser, is the little red box run from left to right and stop at 400.

However when i load the page, the box is ALREADY at 400, so it skips the animation.

Essentially, i need the browser to draw each interation of the left co-ordinate.

How to i force the broswer to re-draw?

Answer 1

Just used setInterval and it works.

var ball = $("#ball");
var p = $("#ball").position();
var i = 1000;
for(;;){
    //setInterval(myFunction, i);
    setTimeout(myFunction, i);
    i+= 100;

    if ( i> 10000 ){
        break;
    }
}
function myFunction(){
    $("#ball").css("left", ++p.left);
}

It is a dirty piece of code so do optimize it in case you want to go with it.

Update:
I meant to use setTimeout not setInterval