Как добавить паузу между каждой итерацией jQuery.каждый()?

Я хватаю массив объектов jQuery, а затем через.каждый () изменение каждого отдельного jquery с в массиве.

в этом случае я обновил имена классов, чтобы вызвать свойство-webkit-transition для использования перехода css.

Я бы хотел, чтобы была пауза перед началом каждого перехода css. Я использую следующее, Но между каждым обновлением нет задержки. Вместо этого все они, похоже, обновляются одновременно. 

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

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

Я надеялся setTimeout решил бы это, но он, похоже, не работает. Есть ли способ выполнить паузу перед каждым обновлением имени класса каждого объекта?

8 61
jquery each settimeout

8 ответов:

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

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

  var time = 500;

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

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

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

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

9

как о .задержка() ?

или 

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

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

1

дайте этому попытку:

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

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

пожалуйста, имейте в виду .delay () работает не так, как setTimeout. Дополнительные сведения см. В разделе jQuery .delay() documentation.

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

1

проверьте это, хорошо работал для меня! :)

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

этот код Добавить выберите первоначальной задержкой в 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;
    });
});
-1