jQuery .each ()의 각 반복 사이에 일시 중지를 추가하는 방법은 무엇입니까?

jQuery 객체의 배열을 잡은 다음 .each ()를 통해 배열에서 각 개별 jquery를 수정합니다.

이 경우 CSS 전환을 활용하기 위해 -webkit-transition-property를 트리거하도록 클래스 이름을 업데이트했습니다.

각 CSS 전환이 시작되기 전에 잠시 멈췄 으면합니다. 다음을 사용하고 있지만 각 업데이트 사이에 지연이 없습니다. 대신, 모두 한꺼번에 업데이트되는 것처럼 보입니다.

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

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

나는 setTimeout이 이것을 해결하기를 바랬지 만 작동하지 않는 것 같습니다. 각 객체의 각 클래스 이름 업데이트 전에 일시 중지를 수행하는 방법이 있습니까?

나는 이것을 주석으로 추가했지만 이제 올바르게 읽고 내 질문에 답 했으므로 아마도 작동 할 것입니다.

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

  var time = 500;

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

오래된 스레드를 찾아서 미안하지만이 팁은 유사한 문제에 유용 할 수 있습니다.

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

500ms마다 자신을 호출하는 메서드를 만들면 그 트릭을 수행해야합니다. 다음 코드가 작동합니다.

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/

방법에 대한 .delay () ?

또는

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

Safari / iOS 만 대상으로하는 경우 애니메이션 시퀀스의 정확한 타이밍을 제어하는 ​​것이 얼마나 중요한지에 따라 JS 시간 초과와 관련된 솔루션을 피해야합니다. 특히 느린 프로세서 나 백그라운드에서 많은 작업이 진행되는 컴퓨터에서 애니메이션이 시간 초과 지연과 동시에 완료된다는 보장은 없습니다. 최신 버전의 웹킷 (모바일 사파리 포함)에서는 @-webkit-keyframes. Webkit.org에는 이에 대한 멋진 소개가 있습니다 . 실제로 구현하기가 매우 쉽습니다.

이것을 시도하십시오 :

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

솔직히 말해서 ... 과거에 $ (this) .delay ()가 어떤 경우에는 오작동했고 다른 경우에는 완벽하게 작동했습니다. 그러나 이것은 일반적으로 DOM 속성 조작이 아닌 jQuery 애니메이션 호출과 함께 사용되었습니다.

.delay ()는 setTimeout과 같은 방식으로 작동하지 않습니다. 자세한 내용 은 jQuery .delay () 문서를 참조하십시오 .

내가 아는 한 $ (). each는 절차 적으로 실행되므로 호출의 다음 반복은 선행 작업이 완료된 후에 만 ​​시작되어야합니다.

이것을 확인하십시오, 나를 위해 잘 작동했습니다! :)

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

이 코드는 초기 지연을 50ms로 추가합니다. 그런 다음 ".row"클래스를 통한 각 루프에 대해 추가 200ms 지연을 추가합니다. 이것은 각 행에 대해 멋진 지연된 쇼 효과를 생성합니다.

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