Div ID fade code

Question

Hi,

I'm a newbie on jQuery. Can somebody help me with my 2days problem. I just in need of a sample code for a fading effect, slideshow.

Here's the style.

• This will be 3 Divs with same class
• The first div, will show for 6secs then fades out for 2secs
  • before the first fades out the second div will fade in for 2secs
  • this again will show for 6secs then fades out for 2secs.
• Then the third div will fades in same way for 2secs.
• Will show for 6secs then fades out for 2secs. Then they will rotate or loop.

Thank you for helping me out.

EDIT - Relevant code from comment

$(document).ready(function(){ 
    function looptour(){ 
        $("#health").hide();
        $("#billing").hide(); 
        $("#pension").delay(6000).fadeOut(2000);            
        $("#health").delay(6000).fadeIn(2000).delay(6000).fadeOut(2000);    
        $("#billing").delay(14000).fadeIn(2000).delay(6000).fadeOut(2000); 
        $("#pension").delay(14000).fadeIn(2000,looptour); 
   } 
   looptour(); 
});

Answer 1

I'm not sure what your exact issue is, since your code seems to work for me.

If it were me, I might do it a little differently (assuming I understand the intended result).

Try it out: http://jsfiddle.net/XgFna/2/

var arr = [
    $("#pension"),
    $("#health").hide(),
    $("#billing").hide()
];
var cur = 0, nxt = 1;

setInterval(function() {
    arr[cur].fadeOut(2000);
    arr[nxt].fadeIn(2000);
    cur = (cur + 1 < arr.length) ? cur + 1 : 0;
    nxt = (nxt + 1 < arr.length) ? nxt + 1 : 0;
},6000);

​