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

我有一个关于jQuery中动画队列的问题。让我们讨论一个例子

假设我有一个div和一堆p元素，其中一些p元素的类类似于“read”：

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

因此，我更改了脚本，如下所示：

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

例如：

在这种情况下，如果我们从最后一个元素中删除“read”类，它将按照我的期望顺利运行。但是，最后一个p元素可以具有“read”类。所以这也不是一个解决方案

这只是一个将我的问题形象化的例子。周围可能有很多例子。我的问题是，在每个p元素完成其自身的淡出动画后，是否有一种方法将我的高度动画排队。假设语法：

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

因此，在所有p元素完成其淡出动画后，将触发“我的高度”动画

我希望我能把自己说清楚

提前谢谢

好问题

我认为您可以使用：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);
    }
});

但我不知道怎样才能做到排队等待

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

$('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);
    }
});