不同延迟时间的jQuery幻灯片

Question

我使用了Innerfade和Cycle，但我需要淡入淡出，暂停和淡出的几个div，但我希望以不同的幻灯片速率暂停，因为一些内容会比其他。我没有看到我能用Innerfade或Cycle来完成这个任务。

我试过了，但是所有的事件都是一次点燃。

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

因此，在这种情况下，我希望在5秒钟后每张幻灯片淡出，但幻灯片3应保持10秒。我怎样才能做到这一点？谢谢你提供的所有帮助！

Answer 1

“延迟”只会延迟与其关联的元素的动画，而不会延迟您以后动画的其他元素。使用“的setTimeout” javascript函数，而不是看到代码工作：

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

的代码是：

$("#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); 

用于火灾超时功能的值是之前的“延迟”值加1500（1.5秒）。

Registers Neil