¿Cómo agregar una pausa entre cada iteración de jQuery .each ()?

Estoy tomando una matriz de objetos jQuery y luego a través de .each () modificando cada jquery individual en la matriz.

En este caso, actualicé los nombres de las clases para activar una propiedad -webkit-transition-property para utilizar una transición css.

Me gustaría que hubiera una pausa antes de que comience cada transición de CSS. Estoy usando lo siguiente, pero no hay demora entre cada actualización. En cambio, todos parecen actualizarse a la vez.

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

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

Esperaba que setTimeout resolviera esto, pero no parece estar funcionando. ¿Hay alguna forma de realizar la pausa antes de cada actualización del nombre de CLASE de cada objeto?

Agregué esto como comentario, pero ahora que lo he leído correctamente y respondí mi propia pregunta, esto probablemente funcionaría:

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

  var time = 500;

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

Perdón por desenterrar un hilo antiguo, pero este consejo podría ser útil para problemas similares:

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

Si crea un método que se llama a sí mismo cada 500 ms, debería hacer ese truco. El siguiente código debería funcionar.

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

Probado en violín: http://jsfiddle.net/jomanlk/haGfU/

¿Qué tal .delay () ?

o

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

Si solo está apuntando a Safari / iOS, dependiendo de lo importante que sea para usted controlar el tiempo exacto de las secuencias de animación, tal vez debería evitar cualquier solución que implique tiempos de espera de JS. No hay garantía de que la animación se complete al mismo tiempo que el tiempo de espera, particularmente en procesadores lentos o máquinas que tienen muchas cosas en segundo plano. Las versiones posteriores de webkit (incluido el safari móvil) permiten secuencias de animación cronometradas a través de @-webkit-keyframes. Webkit.org tiene una buena introducción . De hecho, es bastante fácil de implementar.

Prueba esto:

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

Seré honesto ... He tenido $ (this) .delay () se porta mal en el pasado en ciertos casos y funcionó perfectamente en otros. Sin embargo, esto era normalmente junto con las llamadas de animación de jQuery, no la manipulación de atributos DOM.

Tenga en cuenta que .delay () no funciona de la misma manera que setTimeout. Para obtener más información, consulte la documentación de jQuery .delay () .

Hasta donde yo sé, $ (). Cada uno se ejecuta procedimentalmente, por lo que la siguiente iteración de la llamada solo debe comenzar después de que se haya completado la anterior.

Mira esto, ¡funcionó bien para mí! :)

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

Este código agregará el retardo inicial a 50ms. Luego, para cada bucle a través de la clase ".row", agregará un retraso adicional de 200 ms. Esto creará un bonito efecto de espectáculo retardado para cada fila.

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