3

.postループが要素のリストを反復し、ゆっくりとフェードする順次アニメーションを作成しようとしています。難しいのは、最後の反復がフェードを終える前に次の反復がフェードインし始めるようにすることです。私がこれまでに持っているのは、それらを次々とフェードインする単純な順次アニメーターだけです。

$(".post").hide();
var posts = $(".post"),
    i = 0;
(function() {
  $(posts[i++]).fadeIn('slow', arguments.callee);
})();

.post前の要素が終了する前に、これを変更して fadeIn()を許可する方法を知っている人はいますか?

4

2 に答える 2

5

を使用してそれらを繰り返し、それぞれeach()にaを使用してsetTimeout()、アニメーションの継続時間をindexそれぞれの電流で乗算します。

var posts = $(".post").hide();

  // Holds reference to the index of the current iteration
  // ------------------v
posts.each(function( index ) {
    var $th = $(this);
    setTimeout(function() {
        $th.fadeIn('slow');   // Removed arguments.callee
    }, index * 300);
});

したがって、それぞれsetTimeout()に期間がありn*600、必要な効果が得られるはずです。

ちなみに、posts他の目的で変数が必要ない場合は、次のように、変数を削除して、.each()後をチェーンすることができます.hide()。$(".post").hide().each(func...)

編集：エラーが発生しました。値の違うthis中を使っていました。setTimeout()正しい値を渡すように編集されました。

編集：質問を読み間違えました。アニメーションの部分的なオーバーラップを与えるために、の期間を変更しsetTimeout()ました。300

于 2010-07-31T15:05:29.207 に答える
1

パトリックの解決策に似ていますが、私の意見では少しきれいです

(function() {
  $(".post").hide().each(function(index){
    $(this).delay(index * 300).fadeIn('slow');
  });
})();

デモ、300は遅延'slow'の持続時間ですが、はフェードの持続時間です

于 2010-07-31T15:14:24.100 に答える