Animation does not get drawn in javascript?
<p>I know there is a .animate() function in jQuery, however i want to play around writing my own!</p>

<p>Ive got this script:</p>

<pre><code>var ball = $("#ball");
var p = $("#ball").position();

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

<p>with these elements:</p>

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

&lt;div id="board"&gt;
    &lt;div id="ball"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

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

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

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

<p>How to i force the broswer to re-draw?</p>
