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:
- <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!
- 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