애니메이션 콜백이 완료되기 전에 jquery 루프를 실행하여 반복 하시겠습니까?

Question

루프가 요소 목록 .post을 반복하고 천천히 사라지는 연속 애니메이션을 만들려고합니다. 어려운 부분은 마지막 반복 전에 페이딩이 끝나기 전에 다음 반복이 사라지기 시작하는 것입니다. 지금까지 내가 가지고있는 것은 순차적으로 사라지는 간단한 순차 애니메이터입니다.

$(".post").hide(); 
var posts = $(".post"), 
    i = 0; 
(function() { 
    $(posts[i++]).fadeIn('slow', arguments.callee); 
})(); 

사람이 내가이 이전 ELEM/S를 완료하기 전에 fadeIn()에 .post 수 있도록 변경할 수있는 방법을 알고 있나요?

Answer 1

each()을 사용하여 반복하고 setTimeout()을 사용하고 애니메이션의 지속 시간에 각각 index을 곱합니다.

var posts = $(".post").hide(); 

    // Holds reference to the index of the current iteration 
    // ------------------v 
posts.each(function(index) { 
    var $th = $(this); 
    setTimeout(function() { 
     $th.fadeIn('slow'); // Removed arguments.callee 
    }, index * 300); 
}); 

그래서 각 setTimeout() 당신이 원하는 효과를 제공한다 n*600의 지속 시간을 가질 것입니다. : 당신이 다른 목적으로 posts 변수가 필요하지 않은 경우

그런데

, 당신은에서 $(".post").hide().each(func...)

---

EDIT 같이 .hide() 후 .each() 그것을 제거하고 체인 수 나는 잘못했다. 다른 값을 가진 setTimeout() 안에 this을 사용하고있었습니다. 올바른 값으로 전달되도록 편집되었습니다.

편집 : 질문을 잘못 읽습니다. setTimeout()의 지속 시간을 300으로 변경하여 애니메이션에서 부분적으로 겹쳐 지도록했습니다.

Answer 2

패트릭의 솔루션과 유사

,하지만 내 의견

(function() { 
    $(".post").hide().each(function(index){ 
    $(this).delay(index * 300).fadeIn('slow'); 
    }); 
})(); 

demo에 약간의 청소기는 300는 'slow'으로 페이드