다른 요소에 대해 애니메이션을 어떻게 대기시킬 수 있습니까?

Question

jQuery에서 애니메이션 대기열에 대한 질문이 있습니다. 예를 들어 설명해 보겠습니다.

하자 내가 DIV과의 P 요소의 무리와 그 페이지의 요소 중 일부는 "읽기"와 같은 클래스가 있다고 가정 :

<div class="wrapper"> 
    <div class="inner"> 
     <p>Paragraph 1</p> 
     <p class="read">Paragraph 2</p> 
     <p>Paragraph 3</p> 
     <p class="read">Paragraph 4</p> 
     <p>Paragraph 5</p> 
     <p class="read">Paragraph 6</p> 
     <p>Paragraph 7</p> 
     <p class="">Paragraph 8</p> 
    </div> 
</div> 

내가 밖으로 읽기 사람들을 페이드 애니메이션 싶습니다 그에 따라 래핑 div 요소의 높이. 이 jQuery 코드 블록은 작동하지 않습니다. 각 우리 높이 애니메이션 호출되며, 결과적으로 div.wrapper의 높이를 단계적으로 조정한다 .fadeOut 후

var initHeight = $('.wrapper').height(); 
$('.wrapper').height(initHeight); 
$('p').not('.read').fadeOut(300, function() { 
    $('.wrapper').animate({ 
     height: $('.inner').height() 
    }, 300); 
}); 

이유이다. 다음은 예를 찾을 수 있습니다

이

var initHeight = $('.wrapper').height(); 
$('.wrapper').height(initHeight); 
$('p').not('.read').fadeOut(300, function() { 
    if ($(this).is(':last-child')) { 
     $('.wrapper').animate({ 
      height: $('.inner').height() 
     }, 300); 
    } 
}); 

예 :이 경우 http://jsfiddle.net/7gW5w/3/

우리가 제거하는 경우 "읽기"

http://jsfiddle.net/7gW5w/2/

그래서 나는 아래에있는 것과 같은 스크립트를 변경 클래스를 마지막 요소에서 제거하면 원하는대로 부드럽게 실행됩니다. 그러나 마지막 p 요소는 "read"클래스를 가질 수 있습니다. 그래서 이것은 해결책이 아닙니다.

이것은 내 질문을 시각화 한 예입니다. 주위에 많은 예제가있을 수 있습니다. 내 질문은, 각 p 요소가 자신의 fadeOut 애니메이션을 완료 한 후, 내 키 애니메이션을 큐에 넣는 메서드가 있는가입니다. 가설 문법 :

var initHeight = $('.wrapper').height(); 
$('.wrapper').height(initHeight); 
$('p').not('.read').fadeOut(300); 
$('p').not('.read').queueAfter(function() { 
    $('.wrapper').animate({ 
     height: $('.inner').height() 
    }, 300); 
}); 

p 요소가 모두 fadeOut 애니메이션을 완료하면 높이 애니메이션이 실행됩니다.

나는 내 자신을 분명히 할 수 있기를 바랍니다.

미리 감사드립니다.

우구르

Answer 1

좋은 질문입니다.

마지막 선택기를 사용하여 문제를 해결할 수 있다고 생각합니다. 내 생각은 마지막 요소에 대해서만 콜백을 제공하는 것이었다. 이 같은 :

$('p').not('.read').filter(':not(:last)').fadeOut(300); 
$('p').not('.read').filter(':last').fadeOut(300, function() { 
    if ($(this).is(':last-child')) { 
     $('.wrapper').animate({ 
      height: $('.inner').height() 
     }, 300); 
    } 
}); 

하지만 내가 queueAfter 같은 것을