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

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


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
        </div>
        <div id="body_div">
            <p id="body_text">Body text
        </div>
        <div id="footer_div">
            <p id="footer_text">Footer text
        </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