Why this very simple javascript/jquery code won't work correctly
<p>I have a very simple JavaScript/jquery code which won't just work correctly.
The problem seems to be that positioning of the div with id 'circle' does not seem to get calculated when the loop is run.
Just need to know why the problem is occurring and if any fixes available.</p>

<p>Here is the link <a href="http://jsfiddle.net/TDRyS/" rel="nofollow">http://jsfiddle.net/TDRyS/</a>
Basically what I am trying to do is trying to move the ball up once it is at a distance of 500px from the top.</p>

<p><strong>The code:</strong></p>

<pre><code>var maxa = document.width;
var maxb = document.height;
$(document).ready(function() {

    dothis();
});

function dothis() {
    var left = parseInt(document.getElementById('circle').style.left);
    var top = parseInt(document.getElementById('circle').style.top);
    if (top &gt;= 500) {
        $("#circle").animate({
            top: "-=" + Math.floor(Math.random() * 100 + 1) + "px",
            left: "-=" + Math.floor(Math.random() * 100 + 1) + "px"
        }, 1000);
    }
    else {
        $("#circle").animate({
            top: "+=" + Math.floor(Math.random() * 100 + 1) + "px",
            left: "+=" + Math.floor(Math.random() * 100 + 1) + "px"
        }, 1000);

    }

    dothis();
}​
</code></pre>
