일련의 애니메이션이 동적으로 완료된 후에 만 ​​애니메이션을 트리거하는 방법

Question

나는 완전한 초보자입니다. xml 파일의 정보에 따라 요소 수에 관계없이 애니메이션을 처리 할 수있는 코드를 만들려고합니다. 달성하려는 4 단계가 있습니다.

1. 모든 요소가 표시 될 때까지 하나씩 컨테이너 div의 모든 하위 요소를 페이드 인합니다.
2. 지연하고 한 번에 컨테이너 div의 모든 요소를 ​​페이드 아웃합니다.
3. 다음 컨테이너 div로 이동하고 거기에있는 자식 요소와 동일하게 수행하십시오.
4. 루프.

지금까지 1 단계에서 계속 진행 중입니다. 하위 요소를 순차적으로 페이드 인시킬 수는 있지만 모든 컨테이너 div에 관계없이 모두 사라집니다. 그리고 모든 것이 사라집니다. 첫 번째 컨테이너 div가 모든 요소에서 사라지기 전까지는 아무 것도 트리거하지 않고 사라질 때까지는 나머지를 파악할 수 없습니다. 나는 여러 가지 다른 것들을 시도했지만 나는 거기에 갈 수 없으며 내가 뭘 잘못하고 있는지 모른다. 여기 내 코드는 지금까지 있습니다 : 1 단계의 경우

$('.element').find('.inner').each(function(index){ 
    $(this).delay(2000*index).fadeIn(2000); 
}); 
$('.inner').promise().done(function() { 
// my callback 
    $('.element').delay(4000).fadeOut(2000); 
}); 

Answer 1

: 당신은 fadeIn 첫 번째 사업부의 아이 fadeIn에 전달 된 완전한 콜백 함수는 요소의 다음 형제를 얻을 때까지 그것을 퇴색한다이 다음 형제는 더 이상 없습니다. 이 (의사 코드)와 같은 뭔가 :

var fadeInCallback = function(evt) { 
    //this will reference the object that fadeIn was called on 
    if($(this).next().size() > 0) { 
    $(this).next().fadeIn(2000, fadeInCallback); 
    } 
}; 
$('.element div:first-child').fadeIn(2000, fadeInCallback); 

참조 : jQuery를에 애니메이션을 문제 타이밍 및 동기화 http://api.jquery.com/first-child-selector/ 및 http://api.jquery.com/next/

Answer 2

멋진 플러그인이 : jquery-timing. 은 매우 쉬운 체이닝 문법을 제공합니다. 당신은 또한 플러그인의 반복() 메소드를 필요로 여러 div에 대한

// 1. Fade in all child elements of a container div, one by one until all elements are visible. 
// 2. Delay, and then fade out all elements in the container div at once. 
$('.someDiv .inner').each($).fadeIn(2000,$).all().wait(4000).fadeOut(2000); 

반복하려면 그 행동 : 다음 예제 코드는 하나의 체인입니다.

// Move on to the next container div and do the same with the child elements there...and so on. 
// Loop. 
$('.divs').repeat().each($).find('.inner') 
    .each($).fadeIn(2000,$).all().wait(4000).fadeOut(2000,$); 

이 애니메이션에 대한 전체 코드입니다 : 다시 우리는 자동으로 모든 애니메이션에 대한 모든 대기를 수행하는 하나의 jQuery 체인을 가지고있다.

재미있게 보내십시오.