12

これが明らかなものであるならば、私を許してください。

ページに不明な数の要素があり、一度に1つずつループして、処理を行う必要があります。ただし、要素で使用される関数が完了するまでループを一時停止してから、次の反復に進む必要があります。

$ .eachループでこれを実行しようとしましたが、コマンドがすぐに実行され、コマンドが完了するのを待たずに終了しました。

何か案は？

$('elem').each(function(){
    $(this).fadeIn().wait(5000).fadeOut();
});

これは私が持っているもので、非常に単純です。ここからwait（）関数を取得しました：jqueryクックブックサイト。

問題は、ループが待機しないことです。実際のコマンドは意図したとおりに機能します。すべてが一度にオフになるだけです。

助けてくれてありがとう。

編集：これが実行された後、ループを再度実行して、要素のリストが順番にフェードイン/フェードアウトされるようにすることができます

EDIT2：1.4.2 jQuery libを取得してから、1.3.2を使用していたため、カスタムのwait（）関数を使用していました。lobstrosityで説明されているように、delay（）を使用しています。lobstrosityに感謝します:)。

4

4 に答える 4

9

まず、jQuery 1.4にdelay関数が追加されました。これは、カスタム待機の実装が行っていることだと思います。

遅延を使用すると、各コールバックの最初のパラメーターを初期遅延の乗数として使用することで、前の要素が終了するのを「待機」している各要素の機能を偽造できます。このような：

var duration = 5000;

$('elem').each(function(n) {
    $(this).delay(n * duration).fadeIn().delay(duration).fadeOut();
});

したがって、最初の要素はすぐにフェードインします。2番目は5,000ミリ秒後にフェードインします。10,000ミリ秒後の3番目など。これは偽物であることに注意してください。各要素は、実際には前の要素が終了するのを待っていません。

于 2010-03-03T15:16:55.237 に答える
3

を使用するメインループeach()は、要素のコレクションに対して遅延なく実行されます。代わりに、これらの要素をキューに入れる必要があります。

これには微調整が必​​要な場合がありますが（おそらくjQueryキューを使用できますか？）、再帰を使用してキューを処理する方法を示します。

function animate(elems) {
    var elem = elems.shift();
    $(elem).fadeIn().wait(5000).fadeOut(2000, function() {
        if (elems.length) {
            animate(elems);
        }
    });
}

var elems = $('elem');
animate(elems);
于 2010-03-03T15:13:02.943 に答える
0

おそらく最初の関数の前にwaitを呼び出す必要があります：

  $(this).wait().fadeIn().wait(5000).fadeOut();

もう1つのオプションは、コールバックを使用することです。

 $(this).wait().fadeIn('slow', function(){$(this).fadeOut('slow')});

このように、fadeInが完了するまでfadeOutは開始されません。

于 2010-03-03T15:07:43.800 に答える
0

これが私のソリューションのデモです。

必要なのは、処理を処理するためのループではありません。必要なのは、呼び出しを連鎖させることです。もっと簡単な方法があるようですが、ここに力ずくの方法があります。

// Create a function that does the chaining.
function fadeNext(x,y) {
  return function() { x.fadeIn(100).delay(100).fadeOut(1000, (y?y.fadeNext:y)); };
}

// Get all the elements to fade in reverse order.
var elements = [];
$('.f').each(function(i,e) {elements.unshift(e);});

// Iterate over the elements and configure a fadeNext for each.
var next;
for (var i in elements) {
  var e = $(elements[i]);
  e.fadeNext = fadeNext(e,next);
  next = e;
}

// Start the fade.
next.fadeNext();
于 2010-03-03T17:21:05.100 に答える