fade in a series of divs then fade out the previous one

Question

So using jquery, I got a bit of javascript to fade in a series of divs over a certain amount of time. Now I want to fade out the previous div. Would I be right in putting a fade out function as a call back in the fade in function?
So it would look like this.

<script type="text/javascript">
$(function() {
        $("div").each(function(i, e) {
                $(this).delay(i*400).fadeIn(
                $(this).delay(i*400).fadeOut);
        });
});
</script>

Would that be right or am I doing it wrong?

Answer 1

You have a few syntax problems, the callback should be like so:

$("div").each(function(i, e) {
    $(this).delay(i*400).fadeIn(function() {
        $(this).delay(i*400).fadeOut();
    });
});

Demo: http://jsfiddle.net/tymeJV/FJMa4/

Answer 2

Try this, if you need to cycle through and fixed syntax.

Demo

 var arrDivs = $("div").get(); //Get all the divs into an array
    function fade()
    {
        var div = arrDivs.shift(); //get the top div
        var $this = $(div); 
        arrDivs.push(div); //push it to the end for cycle to repeat
            $this.delay($this.index()*400).fadeIn(function(){ //get the index to calculate the delay time.
                $this.delay($this.index()*400).fadeOut(function(){
                window.setTimeout(fade,1000);
                });
            });
    }
fade();