javascript - jquery中的太阳系

我正在尝试在 jQuery 中创建一个太阳能系统。我有 5 个在椭圆路径上移动的图像行星。当一颗行星到达起点时，它应该重新开始。我暂时不能，因为有5个行星必须移动并且浏览器将被阻止。我必须在一段时间后再次调用该函数(比如制作一个 cicle 需要 8 秒)。行星在一段时间(几分钟)后移动缓慢。有没有更好的方法来做到这一点？

$(window).load(function() {
    solar(10, 1, "#i1", getDim($("#i1")));
    solar(200, 1, "#i2", getDim($("#i2")));
    solar(400, 1, "#i3", getDim($("#i3")));
    solar(400, 0, "#i4", getDim($("#i4")));
    solar(200, 0, "#i5", getDim($("#i5")));
});

function solar(start, dir, id, dim) {
    var nr = 0;
    var i = start;
    while (nr != 2) {
        if (dir == 1) {
            i += step;
            if (Math.abs(i - 2*aa) < step)
                dir = 1- dir;
        } else {
            i -= step;
            if (Math.abs(i) < step)
                dir = 1- dir;
        }
        if (Math.abs(i - start) < step) {
            nr++;
        }
        p = getElipsePoint(p, dim);
        $(id).animate(
            {"left": p.x, "top": p.y},
            { duration:1 }
        );
    }
    window.setTimeout(function() { solar(start, dir, id, dim) }, 8000);
 }

最佳答案

您可以使用回调来确定动画何时完成。像这样的东西:

$(id).animate(
            {"left": p.x, "top": p.y},
            { duration:1 }, function () { console.log("Begin animation again"); }
        );

关于javascript - jquery中的太阳系，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14705809/