不同延遲時間的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