애니메이션을 적용 할 때 모든 요소가 완료 될 때만 콜백을 시작하는 방법은 무엇입니까?

Question

jQuery에서 애니메이션을 적용 할 때 각 요소가 아닌 모든 요소가 애니메이션 처리되는 경우에만 콜백을 시작하는 것이 가장 좋습니다. 예를 들어

:

$('.someElements').fadeOut('fast', function() { 
    // dont do this until ALL elements are done fading 
} 

Answer 1

이 시도하는 코드 조각이 될 수 ... 당신이해야 할 어떤 않는 콜백에 특수 코드를 가질 수 있습니다 콜백해야 해.

EDIT (다른 방법) :

또한 모든 요소가 아니라 마지막 하나를 잡을 수 있습니다.

$('.someElements').not(.someElements:last).fadeOut(); 

다음은이에 콜백

$('.someElements:last').fadeOut(fast, function(){ 
    // do something, it's the end of the world 
}; 

Answer 2

이에 따라, 좋은 질문입니다 jQuery docs :

여러 요소가 애니메이션되는 경우, 일치 당 콜백이 한 번 실행되는 것이 중요합니다 요소가 아니라 전체 애니메이션을 위해 한 번.

당신이 할 수이 문제를 해결하려면 다음

• 열거 .someElements 일치하는 모든 요소, 그리고 각각에 대해 별도의 콜백을 설정합니다.
• 총 콜백 수를 추적하는 변수가 count입니다. 카운트가 0에 도달하면이 0

에 도달 할 때까지 콜백에서

모든 콜백이 완료되면 count을 감소, 당신은 모든 요소가 애니메이션 완료 보장됩니다.

var numberOfElements = $('.someElements').length; 

$('.someElements').fadeOut(fast, function() { 
    if(numberOfElements-- > 0) return; 
    alert('call the Fireman!'); 
}); 

을 경고는 말에 바로 자리 표시 자입니다 : 여기에서, 당신은 다음

Answer 3

최근의 jQuery를 릴리스 (버전 1.6 이상)는 promise의 아이디어를 포함을하는 페이드를 추가합니다. 이 함수를 사용하면 해결 방법이 필요하지 않습니다. 예 :

// define the animation on many elements 
$('.someElements').fadeOut('fast'); 

// define the promise that is called once all element animations are done 
$('.someElements').promise().done(function() { 
    // put callback actions here 
});