Question

我对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/

在这种情况下，如果我们从最后一个元素中删除“read”类，它将按照我的需要顺利运行。但是，最后一个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动画之后，我的高度动画将被触发。

我希望我能清楚自己。

提前致谢。

的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这样的事情

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

1 个答案: