Как добавить паузу между каждой итерацией 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 для каждого объекта?

Ответы

Ответ 1

Я добавил это как комментарий, но теперь, когда я прочитал его правильно и ответил на свой вопрос, это, вероятно, сработает:

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

  var time = 500;

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

Ответ 2

Извините за то, что выкопал старую ветку, но этот совет может быть полезен для подобных проблем:

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

Ответ 3

Если вы создаете метод, который вызывает себя каждые 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/

Ответ 4

Как насчет . delay()?

или

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

Ответ 5

Если вы настроили таргетинг на Safari/iOS, в зависимости от того, насколько важно контролировать точное время анимационных последовательностей, вы должны избегать любого решения, которое включает тайм-ауты JS. Нет гарантии, что анимация будет завершена одновременно с задержкой таймаута, особенно на медленных процессорах или машинах, в которых много чего происходит в фоновом режиме. Более поздние версии webkit (включая мобильное сафари) позволяют выполнять временные анимационные последовательности через @-webkit-keyframes. Webkit.org имеет приятное введение в него. Это на самом деле довольно легко реализовать.

Ответ 6

Попробуйте:

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

Я буду честен... У меня было $(это).delay() неправильно в прошлом в некоторых случаях и безупречно работает в других. Однако это, как правило, было связано с вызовами анимации jQuery, а не с обработкой атрибутов DOM.

Помните, что .delay() не работает так же, как setTimeout. Для получения дополнительной информации см. документацию jQuery.delay().

Насколько мне известно, $() каждый выполняет процедурно, поэтому следующая итерация вызова должна начинаться только после завершения предыдущего.

Ответ 7

Проверьте это, хорошо сработал у меня!:)

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

Ответ 8

Этот код добавит установленную задержку до 50 мс. Затем для каждого цикла через класс ".row" он добавит дополнительную задержку в 200 мс. Это создаст приятный эффект задержки для каждой строки.

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