Jak dodać pauzę między każdą iteracją jQuery .each ()?

Pobieram tablicę obiektów jQuery, a następnie poprzez .each () modyfikując każdy pojedynczy jQuery w tablicy.

W tym przypadku zaktualizowałem nazwy klas, aby wyzwolić właściwość -webkit-transit-property w celu wykorzystania przejścia CSS.

Chciałbym, aby przed rozpoczęciem każdego przejścia CSS była przerwa. Używam następujących, ale nie ma opóźnienia między każdą aktualizacją. Zamiast tego wszystkie wydają się aktualizować jednocześnie.

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

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

Miałem nadzieję, że setTimeout rozwiąże ten problem, ale wygląda na to, że nie działa. Czy istnieje sposób na wykonanie pauzy przed każdą aktualizacją nazwy KLASY każdego obiektu?

Dodałem to jako komentarz, ale teraz, gdy przeczytałem to poprawnie i odpowiedziałem na własne pytanie, prawdopodobnie zadziała:

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

  var time = 500;

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

Przepraszamy, że odkopałem stary wątek, ale ta wskazówka może być przydatna w przypadku podobnych problemów:

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

Jeśli stworzysz metodę, która wywołuje samą siebie co 500 ms, powinna to zrobić. Poniższy kod powinien działać.

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

Testowane na skrzypcach: http://jsfiddle.net/jomanlk/haGfU/

A co z .delay () ?

lub

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

Jeśli celujesz tylko w Safari / iOS, w zależności od tego, jak ważne jest dla ciebie kontrolowanie dokładnego czasu sekwencji animacji, być może powinieneś unikać każdego rozwiązania, które obejmuje limity czasu JS. Nie ma gwarancji, że animacja zakończy się w tym samym czasie, co opóźnienie, szczególnie na wolnych procesorach lub maszynach, na których w tle dzieje się dużo rzeczy. Późniejsze wersje zestawu webkit (w tym mobilne safari) umożliwiają tworzenie sekwencji animacji w czasie za pośrednictwem @-webkit-keyframes. Webkit.org ma do tego fajne wprowadzenie . W rzeczywistości jest to dość łatwe do wdrożenia.

Spróbuj:

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

Będę szczery ... W przeszłości zdarzało mi się, że $ (this) .delay () źle się zachowywało, aw innych działało bezbłędnie. Jednak było to zwykle w połączeniu z wywołaniami animacji jQuery, a nie manipulowaniem atrybutami DOM.

Należy pamiętać, że .delay () nie działa w taki sam sposób, jak setTimeout. Więcej informacji można znaleźć w dokumentacji jQuery .delay () .

O ile mi wiadomo, $ (). Każdy wykonuje proceduralnie, więc następna iteracja wywołania powinna rozpocząć się dopiero po zakończeniu poprzedniego.

Sprawdź to, działało dobrze dla mnie! :)

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

Ten kod doda ustawienie opóźnienia początkowego na 50 ms. Następnie dla każdej pętli przechodzącej przez klasę „.row” doda dodatkowe 200 ms opóźnienia. Stworzy to ładny efekt opóźnionego pokazu dla każdego rzędu.

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