[jQuery] Animating several elements in order

[linesandwaves]

Hi everyone,

I'm having the hardest time getting this to work.  On a button click,
I want to animate every div, one after the other,  that is a child of
a div with the id "mainpage".

This is the code I'm using, but I can't seem to make it function
correctly:

$("#button").click(function(){
        $("#mainpage div").each(function() {
                this.fadeOut(500).animate({opacity: 0.0}, 500);
        });
});

Am I on the right track in trying to get each element to begin fading
out after the one before it has finished?