为什么这个非常简单的javascript / jquery代码无法正常工作

Question

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.

Here is the link http://jsfiddle.net/TDRyS/ 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.

The 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 >= 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();
}​

Answer 1

You need to setTimeout before calling the function again\\ pass the function as a callback

Live DEMO

Full code:

var maxa = document.width;
var maxb = document.height;
var up = false;
$(document).ready(function() {

    doThis();
});

function doThis() {

    var left = parseInt(document.getElementById('circle').style.left);
    var top = parseInt(document.getElementById('circle').style.top);
    if (top < 50) {
        up = false;
    }
    if (top >= 500 || up) {

        up = true;
        $("#circle").animate({
            top: "-=" + Math.floor(Math.random() * 100 + 1) + "px",
            left: "-=" + Math.floor(Math.random() * 100 + 1) + "px"
        }, 500, doThis);
    }
    else {
        $("#circle").animate({
            top: "+=" + Math.floor(Math.random() * 100 + 1) + "px",
            left: "+=" + Math.floor(Math.random() * 100 + 1) + "px"
        }, 500, doThis);

    }
}​

Answer 2

There are several problems with this:

1. You can't read style information that comes from CSS from the "style" property of a DOM element. You're using jQuery anyway; it can give you the style information.
2. The calls to "animate" do not complete synchronously. You can pass "dothis" as a third parameter, and jQuery will call your function when the animation completes.

Here is a working version.

Answer 3

To calculate left and top you can also use:

$("#circle").position().left // or .top (relative to parent object)

$("#circle").offset().left // or .top (relative to window)

Anyway the code seems wrong to me, because you are continuosly calling "animate"; you don't let any time for an animation to "run" before calling another animation (and do a nasty function recursion if top>500px).

What you have to do is - wait for the animation to complete, using a time delay or using some event - use a timer to check every n milliseconds if top>500. If so, STOP the current animation and start a new one in the opposite direction