Question

我有一个非常简单的JavaScript / jquery代码，它不能正常工作。问题似乎是在运行循环时似乎没有计算id为'circle'的div的定位。只需知道问题发生的原因以及是否有任何修复方法。

这是链接http://jsfiddle.net/TDRyS/ 基本上我要做的就是在距离顶部500px的距离时试图将球向上移动。

代码：

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

在再次调用函数之前需要setTimeout \将函数作为回调函数传递

<强> Live DEMO

完整代码：

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

这有几个问题：

您无法从DOM元素的“style”属性中读取来自CSS的样式信息。无论如何你正在使用jQuery;它可以为您提供样式信息。
对“animate”的调用不会同步完成。您可以将“dothis”作为第三个参数传递，jQuery将在动画完成时调用您的函数。

Here是一个有效的版本。

Answer 3

要计算左侧和顶部，您还可以使用：

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

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

无论如何，代码对我来说似乎不对，因为你不断地称之为“animate”;在调用另一个动画之前，你不要让任何时间让动画“运行”（并且如果顶部＆gt; 500px，则进行令人讨厌的函数递归）。

你要做的是 - 等待动画完成，使用延时或使用某些事件 - 如果top> 500，则每隔n毫秒使用一个计时器进行检查。如果是这样，请停止当前动画并以相反方向开始新动画

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

3 个答案: