web-dev-qa-db-ja.com

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名が更新される前に一時停止する方法はありますか？

jquerysettimeouteach
70
DA.

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

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

  var time = 500;

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

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

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

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/

9
JohnP

。delay（） についてはどうですか？

または

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

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

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

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

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

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

1
lsuarez

アニメーションシーケンスの正確なタイミングを制御することがいかに重要であるかに応じて、Safari/iOSのみをターゲットにしている場合は、JSタイムアウトを含むソリューションを避ける必要があります。アニメーションがタイムアウト遅延と同時に完了するという保証はありません。特に、バックグラウンドで多くの処理が行われている低速のプロセッサやマシンでは保証されません。 Webkitの新しいバージョン（モバイルサファリを含む）では、@-webkit-keyframes。 Webkit.orgには Nice intro in it があります。実際に実装するのは非常に簡単です。

1
Andrew

これを確認してください、私のためにうまくいきました！ :)

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