How to fade in next div after previous div faded in upon document.ready ?

[crowebster]

Hi all !
Here is my question:
How to fade in div after the previous div finished fading in ?
Here is code I have so far:

HTML:
                <div id="header_div">
                        <p id="header_text">Header text</p>
                </div>
                <div id="body_div">
                        <p id="body_text">Body text</p>
                </div>
                <div id="footer_div">
                        <p id="footer_text">Footer text</p>
                </div>

CSS: not important here

jQuery:

$(function() {
                $('div[@id$=_div]').hide();
                $('div[@id$=_div]').each(function() {
                        $(this).fadeIn('slow');
                });
});

To explain the code:
when DOM is ready we select all divs witch id is ending with "_div"
than we hide them with .hide()
than we loop through each of them with .each() and make them fade in
with .fadeIn()

now this code fade in all divs at the same time
how to fade in them one after another sequentially ?

thanks in advance
crowebster

[dave.methvin]

>         $('div[@id$=_div]').hide();
>         $('div[@id$=_div]').each(function() {
>                 $(this).fadeIn('slow');

> now this code fade in all divs at the same time
> how to fade in them one after another sequentially ?

The best I can do is this:

$(function() {
   var $sequence = $('div[id$=_div]').hide(), div = 0;
   (function(){
       $($sequence[div++]).fadeIn('slow', arguments.callee);
   })();
});

[crowebster]

Thanks !
Works perfectly !
Now could you explain it to me how does the code works ?
So I could learn (comprehend) ?
Thanks again !

[dave.methvin]

> Now could you explain it to me how does the code works ?

Yeah, it is kind of crazy... :-)

>   var $sequence = $('div[id$=_div]').hide()

Grabs all the divs and hides them, then assigns the jQuery object with
all the divs to the $sequence variable.

> , div = 0;

Just sets the div variable to 0.

>   (function(){
>     ...
>   })();

Defines an anonymous function, and calls it immediately. That is done
by enclosing the function in parens and adding the parens at the end
to call it with no arguments.

>       $($sequence[div++]).fadeIn('slow', arguments.callee);

Each time the anonymous function is called, it selects a single div
from the jQuery object using $sequence[div++]. That also increments
the div variable so that it will get the next div the next time it's
called.

$($sequence[div++]).fadeIn('slow', ...); creates a new jQuery object
out of that element and calls fadeIn on that element.

arguments.callee is a reference to the current anonymous function that
we are in. So when the fadein is done it will call the same function,
which will select the next div in $sequence. So it's kind of like a
recursive call.

I realized I haven't handled the termination quite right. When we run
out of divs, $sequence[div++] will return undefined; I was thinking
that would return an empty jQuery object but $(undefined) selects the
document object. That will fadeIn document continuously. An easy fix
is to just skip the fadeIn if we're at the end of the list:

(function(){
   if ( div < $sequence.length )
     $($sequence[div++]).fadeIn('slow', arguments.callee);
})();

If you prefer the one-liner you could do this instead:

(function(){
     $($sequence[div++] || []).fadeIn('slow', arguments.callee);
})();

When $sequence[div++] returns undefined it will use the empty array
which returns an empty jQuery object, which means the chained fadeIn
never runs and that stops the kinda-recursive call to the anonymous
function through arguments.callee.

[crowebster]

Thanks you very much !
Hope to read more from you.
Bye !
Crowebster