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

【问题标题】：How can an animation be queued for different elements?动画如何排队等待不同的元素？
【发布时间】：2011-10-05 11:27:33
【问题描述】：

我对 jQuery 中的动画队列有疑问。让我们来谈谈一个例子。

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

<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 元素完成它自己的淡出动画之后，是否有一种方法可以让我的高度动画排队。假设语法：

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动画之后，我的高度动画就会被触发。

我希望我能说清楚。

提前致谢。

乌古尔

【问题讨论】：

标签： javascript jquery animation queue

【解决方案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 的功能

【讨论】：