jQuery .each（）の各反復の間に一時停止を追加するにはどうすればよいですか？

jQueryオブジェクトの配列を取得してから、.each（）を使用して、配列内の個々のjqueryを変更しています。

この場合、クラス名を更新して、-webkit-transition-propertyをトリガーしてcss遷移を利用します。

各cssトランジションが始まる前に一時停止したいのですが。私は以下を使用していますが、各更新の間に遅延はありません。代わりに、それらはすべて一度に更新されているように見えます。

function positionCards() {
  $cards = $('#gameboard .card');
  $cards.each(function() {
      setTimeout( function(){ addPositioningClass($(this)); }, 500 )
  });
}

function addPositioningClasses($card){
  $card
    .addClass('position')
}

setTimeoutでこれが解決することを期待していましたが、機能していないようです。各オブジェクトの各CLASS名が更新される前に一時停止を実行する方法はありますか？

これをコメントとして追加しましたが、正しく読んで自分の質問に答えたので、おそらくうまくいくでしょう：

function positionCards() {
  var $cards = $('#gameboard .card');

  var time = 500;

  $cards.each(function() {
      setTimeout( function(){ addPositioningClass($(this)); }, time)
      time += 500;
  });
}

古いスレッドを掘り下げて申し訳ありませんが、このヒントは同様の問題に役立つ可能性があります。

$cards.each(function(index) {
    $(this).delay(500*index).addClass('position');
});

500ミリ秒ごとに自分自身を呼び出すメソッドを作成すると、そのトリックを実行する必要があります。次のコードが機能するはずです。

var __OBJECTS = [];

$('#gameboard .card').each(function() {
    __OBJECTS.push($(this));
});

addPositioningClasses();

function addPositioningClasses() {
    var $card = __OBJECTS.pop();
    $card.addClass('position');
    if (__OBJECTS.length) {
        setTimeout(addPositioningClasses, 500)
    }
}

フィドルでテスト済み：http：//jsfiddle.net/jomanlk/haGfU/

どの程度.delay（） ？

または

function addPositioningClasses($card){
  setTimeout(function() { $card.addClass('position')}, 1000);
}

Safari / iOSのみを対象としている場合は、アニメーションシーケンスの正確なタイミングを制御することがどれほど重要かによって異なりますが、JSタイムアウトを伴うソリューションは避ける必要があります。特に低速のプロセッサやバックグラウンドで多くの処理が行われているマシンでは、タイムアウトの遅延と同時にアニメーションが完了する保証はありません。それ以降のバージョンのWebkit（モバイルサファリを含む）では、を介して時限アニメーションシーケンスを使用でき@-webkit-keyframesます。Webkit.orgには素晴らしいイントロがあります。実際、実装は非常に簡単です。

これを試してみてください：

function positionCards() {
  $('#gameboard .card').each(function() {
      $(this).delay(500).addClass('position');
  });
}

正直に言うと...過去に$（this）.delay（）が誤動作したり、他のインスタンスで問題なく動作したりしたことがあります。ただし、これは通常、DOM属性の操作ではなく、jQueryアニメーション呼び出しと関連していました。

.delay（）はsetTimeoutと同じようには機能しないことに注意してください。詳細については、jQuery .delay（）のドキュメントを参照してください。

私の知る限り、$（）。eachは手続き的に実行されるため、呼び出しの次の反復は、前の反復が完了した後にのみ開始する必要があります。

これをチェックしてください、私のためにうまくいきました！:)

jQuery('.optiresultsul li').each(function(index) {
    jQuery(this).delay(500*index).animate({ opacity: 1 }, 500,function(){
        jQuery(this).addClass('bgchecked');
    });
});

このコードは、初期遅延を50msに設定します。次に、「。row」クラスのループごとに、さらに200ミリ秒の遅延が追加されます。これにより、各行に優れた遅延ショー効果が作成されます。

$( document ).ready(function() {
    // set inital delay
    var dtotal = 50;
    $(".row").each(function() {
    //add delay to function
      $(this).delay(dtotal).show();
    //add 200ms to delay for each loop
      dtotal = dtotal + 200;
    });
});