여러 요소에 대기중인 애니메이션

Question

jQuery를 사용하여 여러 요소에 애니메이션을 대기시키는 방법을 찾으려고합니다.

예를 들어, 화면에서 요소 위로 이동해야합니다. 그 다음에 끝나면 다음 칸으로 옮깁니다.

이것은 아마도 하나씩 차례로 떨어지는 아이템 목록 일 것입니다.

누군가 나를 도울 수 있습니까?

다음 애니메이션을 시작하려면 각 애니메이션의 onComplete 기능을 사용해야합니까?

업데이트 : 간단한 예.

<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul> 

각각 하나씩 변색시키고 싶습니다. SO Item 1 fades in. 그러면 작업 2가 끝나면 항목 2가 페이드 인됩니다.

일부 Flash "페이지 빌드"유형의 애니메이션을 jQuery를 사용하여 HTML로 변환하고 있습니다. 그래서 여러 요소에 애니메이션을 대기시켜야합니다. 상자를 만들거나 상자에 텍스트를 놓는 것처럼 ...

Answer 1

실제로 모든 jQuery의 fx methods (.animate() 포함)은 complete callback을 제공합니다. 애니메이션이 완료된 후 비 -fx 물건을 실행해야하는 경우입니다.

그냥 fx 효과를 위해 실행 다른 갖고 싶어

, 그것은 jQuery를 자동으로이 자리에 당신을 돌봐 것

$('object').fadeOut(3000).slideDown(2500).slideUp(1500); 

같은 방법 체인에 충분하다.

이

$('div').slice(4, 9).fadeOut(3333).fadeIn(5555).slideUp(2000).slideDown(1000); 

이 일부 상위 사업부에서 작동합니다 : 이것은 당신의 코멘트를 참조하여

$('object').fadeOut(3000, function() { 
    // do something here 
    $(this).slideDown(2500, function() { 
     // do something here 
     $(this).slideUp(1500, function() { 
      // do something here 
     }); 
    }); 
}); 

갱신

같은 호출로 변환되어 사용자의 불을 지르고 또는 웹킷 콘솔에이 입력 Stackoverflow 측면에서 요소.

Answer 2

다른 요소에 대한 영향의 지속 시간을 알고 있으면 모든 요소에 지연을 추가 할 수 있습니다.

divs를 차례로 페이드 아웃하려는 경우 각 페이드는 800ms가 걸리고 바로 첫 번째 것은 시작할 수 있고 두 번째는 800ms의 지연으로 시작될 수 있습니다. !) ... 한 세 번째 1600ms의 지연 등이

당신이 불을 지르고 또는 웹킷 콘솔을 실행할 수 이것에 대한 자동화 된 예는 (귀하의 예를 생각 jAndy을 좋아 = D)이다 :

$('div.nav li').each(function(i, elem) { 
    $(elem).delay(i * 800).fadeOut(800); 
}); 

(내비게이션 링크 : 질문, 태그, 사용자 ...)

Answer 3

폴 아일랜드어는이 주제에 대한 좋은 기사를 쓴 :

http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/

을 당신을 위해 페이드 - 예, 당신은 할 수 :

(function showNext(jq){ 
jq.eq(0).fadeIn("fast", function(){ 
    (jq=jq.slice(1)).length && showNext(jq); 
}); 
})($('ul > li')) 

맛을 조정합니다.