4

jQueryでソーラーシステムを作成しようとしています。楕円形のパス上を移動する5つのイメージ惑星があります。惑星が開始点に到達すると、それは再び開始する必要があります。移動しなければならない惑星が5つあり、ブラウザがブロックされるため、しばらく時間がかかりません。しばらくしてからもう一度関数を呼び出す必要があります（シクルを作成するための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);
 }
4

1 に答える 1

1

コールバックを使用して、アニメーションがいつ終了したかを判断できます。このようなもの：

$(id).animate(
            {"left": p.x, "top": p.y}, 
            { duration:1 }, function () { console.log("Begin animation again"); }
        );
于 2013-02-05T10:58:29.080 に答える