[jQuery] Animating several elements in order

[jQuery] Animating several elements in order


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?