Как поставить анимацию в очередь для разных элементов?

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>

I 'Я хотел бы затемнить прочитанные и анимировать высоту оберточного элемента 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 может иметь класс «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 может быть достигнуто