javascript - How can an animation be queued for different elements? -

i have question animation queues in jquery. let's talk on example.

let have div , bunch of p elements in , of p elements has class "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'd fade read ones out , animate height of wrapping div element accordingly. jquery code block won't work.

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

the reason is, after each .fadeout our height animation called , result, div.wrapper's height adjusted step step. here can find example:

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

so changed script 1 in below:

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

example: http://jsfiddle.net/7gw5w/3/

in case if remove "read" class last element, run smoothly desired. however, last p element have "read" class. not solution either.

this example visualize question. there can lots of examples around. question is, there method queue height animation, after each p element completes it's own fadeout animation. hypothetical syntax:

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

so after p element completes fadeout animation, height animation triggered.

i hope make self clear.

thanks in advance.

ugur

good question.

i think can solve problem using :last selector. idea provide callback last element. this:

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

but dont know how queueafter achieved