jQuery slideshow with different delay times

问题

I have used Innerfade and Cycle, but I have several divs I need to fade in, pause and fade out, but I want to pause at different rates for different slides because some will have more content than others. I didn't see how I could accomplish this with Innerfade or Cycle.

I tried this, but all of the events fire at once.

<div id="slides">
    <div id="slide1" style="display:none;">Content1</div>
    <div id="slide2" style="display:none;">Content2</div>
    <div id="slide3" style="display:none;">Content3</div>
    <div id="slide4" style="display:none;">Content4</div>
    <div id="slide5" style="display:none;">Content5</div>
</div>
<script>
$("#slide1").fadeIn('slow');
$("#slide1").delay(5000).fadeOut('slow');
$("#slide2").fadeIn('slow');
$("#slide2").delay(5000).fadeOut('slow');
$("#slide3").fadeIn('slow');
$("#slide3").delay(10000).fadeOut('slow');
$("#slide4").fadeIn('slow');
$("#slide4").delay(5000).fadeOut('slow');
$("#slide5").fadeIn('slow');
$("#slide5").delay(5000).fadeOut('slow');
</script>

So in this case, I wanted to fade out each slide after 5 seconds, but slide 3 should stay for 10 seconds. How can I accomplish this? Thanks for any help you can give!

回答1:

"delay" only delays the animation for the element it is associated with, not other elements that you later animate. Use the "setTimeout" javascript function instead see the code working on:

http://jsfiddle.net/elusien/eyJC4/

The code is:

$("#slide1").fadeIn('slow').delay(5000).fadeOut('slow');
var t2 = setTimeout(function(){
    $("#slide2").fadeIn('slow').delay(5000).fadeOut('slow');
    var t3 = setTimeout(function(){
        $("#slide3").fadeIn('slow').delay(10000).fadeOut('slow');
        var t4 = setTimeout(function(){
            $("#slide4").fadeIn('slow').delay(5000).fadeOut('slow');
            var t5 = setTimeout(function(){        
                $("#slide5").fadeIn('slow');
            }, 6500);
        }, 11500);
    }, 6500);
}, 6500);

The values used to fire the timeout function is the previous "delay" value plus 1500 (1.5 seconds).

Regards Neil

来源：https://stackoverflow.com/questions/5357827/jquery-slideshow-with-different-delay-times

标签

jquery

slideshow

delay

fadein

fadeout