Как добавить паузу между каждой итерацией 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 решил бы это, но он, похоже, не работает. Есть ли способ выполнить паузу перед каждым обновлением имени класса каждого объекта?

61
each jquery 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

как о .delay () ?

или 

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

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

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

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

1

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

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

этот код добавит установить задержку inital в 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