动画如何排队等待不同的元素？

Question

我有一个关于jQuery动画队列的问题。我们来举个例子。

让说我有一个div和一堆在它p元素和一些这些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代码块不起作用。

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

的原因是，在每个.fadeOut我们的高度动画将被调用，因此，div.wrapper的高度将逐步调整。在这里你可以找到例子：

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

所以我改剧本就像一个在下面：

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/

在这种情况下，如果我们去掉“读”从最后一个元素开始，它会按照我的意愿顺利运行。但是，最后一个p元素可以具有“读取”类。所以这也不是一个解决方案。

这只是一个可视化我的问题的例子。可以有很多例子。我的问题是，在每个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元素完成其淡出动画后，我的身高动画将被触发。

我希望我能让自己清楚。

在此先感谢。

UGUR

Answer 1

好问题。

我想你可以使用：last选择器来解决你的问题。我的想法是只提供最后一个元素的回调。像这样：

$('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可以实现