Div ID fade code

问题

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(); 
});

回答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);

​

回答2:

$(document).ready(function() {
    function looptour() {
        $(".quote4").hide();
        $(".quote3").hide();
        $(".quote2").hide();
        $(".quote1").delay(1000).fadeIn(3000).delay().fadeOut(1000);
        $(".quote2").delay(7000).fadeIn(3000).delay().fadeOut(1000);
        $(".quote3").delay(11000).fadeIn(3000).delay().fadeOut(1000);
        $(".quote4").delay(16000).fadeIn(6000).delay().fadeOut(1000, looptour);
    }

    looptour();
});

This is how i did it, you just need to take care of the delay.

来源：https://stackoverflow.com/questions/3294955/div-id-fade-code