javascript - チェーン機能が不明な回数

Question

不明なステップ数で要素の上部/左側のcss値をアニメーション化しています。次のコードを使用して、アニメーションの各ステップに必要なcss値を保存しています。

paths = [{ left:-300 }, { top:-161 }, { left:-402 }];

次に、次の方法でアニメーションを実行できます。

$element.animate(paths[0]).animate(paths[1]).animate(paths[2]);

前のアニメーションが終了したときに各アニメーションが開始するようにします。これは正常に機能します。ただし、ステップ数を3（左上から左上）から6に増やしたい場合はどうなりますか？または50？関数を未知の回数連鎖させるにはどうすればよいですか？

score 3 · Accepted Answer

$element.animate(paths.shift(), function next() {
    $(this).animate(paths.shift(), paths.length && next);
});

http://jsfiddle.net/Xsz8w/2/

paths.length && nextコールバックの無限呼び出しを防ぐために必要です。

score 1 · Accepted Answer

var paths = [{ left: -300 }, { top: -161 }, { left: -402 }];

(function animateElement(index) {
    if (paths[index] == null) return;
    $element.animate(paths[index], function () {
        animateElement(index++);
    });
})(0);

score 1 · Accepted Answer

代わりに、パス配列の最後の要素まで自分自身を呼び出す再帰関数を用意してください。

var paths = [{ left:-300 }, { top:-161 }, { left:-402 }];

(function animateNext(i){

  $element.animate(paths[i],function(){

    //on animation complete, check if the next path exists
    if(paths[++i]){

      // if so, let's animate using the next path
      animateNext(i);
    }
  });

//start from index 0
}(0));

score 0 · Accepted Answer

各項目をループし、success関数を使用して次の項目を呼び出すことができます。

intervalJSON にを追加して、animateとdelayを組み合わせて使用することもできます。

score -1 · Accepted Answer

私は jQuery の経験がないのでanimate(a)、次のものを呼び出すにはからの出力が必要であると仮定します。

var e = $element;
for (var i = 0; i < paths.length; i++) {
    e = e.animate(paths[i]);
}

javascript - チェーン機能が不明な回数

5 に答える 5

Related

Reference