2

私は何時間も答えを探していました、そして私の問題は閉鎖にあるようです。私のシナリオでそれを修正する方法を理解できませんでした。1000ms離れた6つの要素でアニメーションのオンロードをトリガーしたいと思います。setTimeoutメソッドを正しく機能させることができません。助けてください！

$(document).ready(function() {
    we();
});

var data = ['450px', '300px', '200px', '120px', '250px', '320px'];
var bars = $('.bar');
var i = 0;

function grow(size, elem) {
    $(elem).animate({
        height: size,
        opacity: '1.0'
    }, 1000);
}


function we() {

    setTimeout (function(){ // if I don't use an annonymous function call here, they all animate at the same time
        grow(data[i], bars[i]);
    }, 1000);

    if (i >= bars.length) {
        return;
    } else {
        i++;
        return we();
    };
}
4

1 に答える 1

5

setTimeout関数の残りの部分も配置する必要があります。への呼び出しだけではありませんgrow。

function we() {
    setTimeout (function(){
        grow(data[i], bars[i]);

        if (i >= bars.length) {
            return;
        } else {
            i++;
            return we();
        };
    }, 1000);
}

あなたが見逃したのはsetTimeout、プログラムをブロックしないことだと思います。実行を停止せず、1000 ミリ秒待ってから続行します。代わりに、無名関数の実行を 1000 ミリ秒遅らせますが、プログラムの残りの部分はすぐに実行を続けます。そして、プログラムのその部分がweもう一度呼び出され、新しいアニメーションがスケジュールされます (最後のアニメーションとほぼ同時に)。そして、別のものなど。

再帰呼び出しを 内setTimeoutに配置することで、再帰も遅らせるため、その後のすべてのアニメーション ステップを遅らせることができます。

于 2013-03-08T06:42:52.160 に答える