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

Lamento desenterrar un hilo viejo (y por mi mal inglés), pero este consejo podría ser útil para otros casos similares:

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

Si haces un método que se llama a sí mismo cada 500 ms que debe 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 se dirige 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 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 (incluyendo mobile safari) permiten secuencias de animación temporizadas a través de @-webkit-keyframes. Webkit.org tiene una buena introducción. En realidad es bastante fácil de implementar.

Pruebe esto:

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

Seré honesto... He tenido this (esto).delay () se comporta mal en el pasado en ciertos casos y funciona sin problemas en otros. Sin embargo, esto era normalmente en conjunción con las llamadas de animación jQuery, no la manipulación de atributos DOM.

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

Hasta donde yo sé, $().cada uno ejecuta proceduralmente por lo que el 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 50 ms. Luego para cada bucle a través del ".fila " clase se añadirá un retraso adicional de 200ms. Esto creará un agradable 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;
    });
});