Wie füge ich eine Pause zwischen jeder Iteration von jQuery .each () hinzu?

Ich greife nach einem Array von jQuery-Objekten und ändere dann über .each () jede einzelne jquery mit im Array.

In diesem Fall habe ich die Klassennamen aktualisiert, um eine -webkit-Transition-Eigenschaft auszulösen und einen CSS-Übergang zu verwenden.

Ich möchte, dass vor jedem CSS-Übergang eine Pause eingelegt wird. Ich verwende Folgendes, aber es gibt keine Verzögerung zwischen den einzelnen Updates. Stattdessen scheinen sie alle gleichzeitig aktualisiert zu werden.

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

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

Ich hatte gehofft, setTimeout würde das lösen, aber es scheint nicht zu funktionieren. Gibt es eine Möglichkeit, die Pause vor jeder Aktualisierung des Klassennamens jedes Objekts zu erreichen?

Ich habe dies als Kommentar hinzugefügt, aber jetzt, da ich es richtig gelesen und meine eigene Frage beantwortet habe, würde dies wahrscheinlich funktionieren:

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

  var time = 500;

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

Es tut mir leid, dass Sie einen alten Thread ausgegraben haben, aber dieser Tipp kann bei ähnlichen Problemen hilfreich sein:

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

Wenn Sie eine Methode erstellen, die sich alle 500 ms selbst aufruft, sollte dies dieser Trick sein. Der folgende Code sollte funktionieren.

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)
    }
}

Auf Geige getestet: http://jsfiddle.net/jomanlk/haGfU/

Wie wäre es mit .delay () ?

oder

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

Wenn Sie nur auf Safari / iOS abzielen, sollten Sie möglicherweise eine Lösung mit JS-Zeitüberschreitungen vermeiden, je nachdem, wie wichtig es für Sie ist, das genaue Timing von Animationssequenzen zu steuern. Es gibt keine Garantie dafür, dass die Animation gleichzeitig mit der Zeitüberschreitungsverzögerung abgeschlossen wird, insbesondere auf langsamen Prozessoren oder Maschinen, auf denen im Hintergrund viel los ist. Spätere Versionen des Webkits (einschließlich mobiler Safari) ermöglichen zeitgesteuerte Animationssequenzen über @-webkit-keyframes. Webkit.org hat eine nette Einführung . Es ist eigentlich ziemlich einfach zu implementieren.

Probieren Sie es aus:

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

Ich bin ehrlich ... Ich habe $ (this) .delay () in der Vergangenheit in bestimmten Fällen schlecht benommen und in anderen fehlerfrei gearbeitet. Dies geschah jedoch normalerweise in Verbindung mit jQuery-Animationsaufrufen und nicht mit der Manipulation von DOM-Attributen.

Bitte beachten Sie, dass .delay () nicht wie setTimeout funktioniert. Weitere Informationen finden Sie in der Dokumentation zu jQuery .delay () .

Soweit mir bekannt ist, wird $ (). Jeder prozedural ausgeführt, sodass die nächste Iteration des Aufrufs erst beginnen sollte, nachdem die vorherige abgeschlossen wurde.

Schau dir das an, hat gut für mich funktioniert! :) :)

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

Mit diesem Code wird die Anfangsverzögerung auf 50 ms eingestellt. Dann wird für jede Schleife durch die ".row" -Klasse eine zusätzliche Verzögerung von 200 ms hinzugefügt. Dies erzeugt einen schönen verzögerten Show-Effekt für jede Zeile.

$( 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;
    });
});