fade DIV in and out with a second DIV

fade DIV in and out with a second DIV

Hi all

Looked all over for an example but nothing that matches what is seemingly such a simple thing to achieve!

My code below should help explain:

  1.     <section class="panel fadercontainer">
            <div class="multimicro" id="panel1">
                <h1>Box 1</h1>
            </div>
            <div class="multimicro" id="panel2">
                <h1>Box 2</h1>
            </div>
        </section>







When my page is displayed I need panel1 to be shown. After 5 sconds, I need panel1 to fade out and at the same time get panel2 (which has up until now been invisible) to fade in and display for 5 seconds, and so the process continues eternally!

I tried working something out myself but to no avail.  I am not a jquery/javascript expert as you can probably tell!

  1.         var first = $('#panel1');
            var second = $('#panel2');
               
            function fade(first, second) {
                first.delay(400).fadeOut('slow', 0, function() {
                    second.fadeIn('slow');
                    var temp     = second;
                    second         = first;
                    first         = temp;
                    setTimeout(fade(second, first), 1000);
                });
            }
            //$(function(){
                // start the process
                fade(first, second);   

















Any help is greatly appreciated.

Doug