1

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

这是链接http://jsfiddle.net/TDRyS/ 基本上我要做的是尝试将球向上移动，一旦它与顶部的距离为 500 像素。

编码：

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

3 回答 3

3

您需要在再次调用函数之前设置超时\将函数作为回调传递

现场演示

完整代码：

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);

    }
}​
于 2012-06-24T16:09:39.133 回答
1

这有几个问题：

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

这是一个工作版本。

于 2012-06-24T16:15:09.433 回答
0

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

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

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

无论如何，代码对我来说似乎是错误的，因为您一直在调用“动画”；在调用另一个动画之前，不要让动画“运行”任何时间（如果 top>500px 则执行讨厌的函数递归）。

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

于 2012-06-24T16:10:02.523 回答