推遲一個jQuery函數

Question

我在頁面上有三個圖像滑塊的實例，它們應該逐個淡入一個接一個。我正在使用innerfade.js

我想讓他們在不同的時間開始，例如，第一個在2秒後開始，第二個在4秒後，第三個在6秒後。所以，fisrt轉換需要在2秒後發生，但是直到下一個衰落才需要6秒。

---

編輯： 他們應該在同一時間一起出現在頁面加載時，然後褪色一個接一個。

---

我不知道我是否可以做到這一點。我嘗試過使用setTimeout以及.delay，但我無法使它工作。原因可能是我對Javascript不太好。但我會很感激這裏的一些幫助。

這是我來自：

$(document).ready(
    function(){ 
     $('#header-img-1').innerfade2({ 
      animationtype: 'fade', 
      speed: 750, 
      timeout: 6000, 
      type: 'random_start', 
      containerheight: '1em' 
     }); 

     $('#header-img-2').innerfade2({ 
      animationtype: 'fade', 
      speed: 750, 
      timeout: 6000, 
      type: 'random_start', 
      containerheight: '1em' 
     }); 

     $('#header-img-3').innerfade2({ 
      animationtype: 'fade', 
      speed: 750, 
      timeout: 6000, 
      type: 'random_start', 
      containerheight: '1em' 
     }); 
    } 
); 

非常感謝。

Answer 1

這裏是正在尋找如何使用的setTimeout來達到一種互動，你的一個簡單的例子：

http://jsfiddle.net/zFMjf/

HTML

<div id="example1" class="con orange" style="display:none;">Example 1</div> 
<div id="example2" class="con lime" style="display:none;">Example 2</div> 
<div id="example3" class="con yellow" style="display:none;">Example 3</div>​ 

CSS

.con { width:200px; line-height:60px; margin:0 0 20px 0; } 
.orange { background:orange; } 
.lime { background:lime ; } 
.yellow { background:yellow ; } 

jQUERY

setTimeout(function(){ 
    $('#example1').slideToggle(); 
},2000); 

setTimeout(function(){ 
    $('#example2').slideToggle(); 
},4000); 

setTimeout(function(){ 
    $('#example3').slideToggle(); 
},6000);​ 

Answer 2

你是對的，你可以使用setTimeout和delay函數延遲腳本執行。

這裏是setTimeout使用的樣本：

setTimeout(function(){ 
     $('#header-img-2').innerfade2({ 
      animationtype: 'fade', 
      speed: 750, 
      timeout: 6000, 
      type: 'random_start', 
      containerheight: '1em' 
     }); 
    },2000 /*2seconds*/); 

關於.delay()你應該編寫這樣的：

$('#header-img-2').delay(2000).innerfade2({ 
    animationtype: 'fade', 
    speed: 750, 
    timeout: 6000, 
    type: 'random_start', 
    containerheight: '1em' 
}); 

Answer 3

$(document).ready(function() { 
    var numb = [1,2,3]; 

    $.each(numb, function(i,elm) { 
     setTimeout(function() { 
      $('#header-img-'+numb[i]).innerfade2({ 
       animationtype: 'fade', 
       speed: 750, 
       timeout: 6000, 
       type: 'random_start', 
       containerheight: '1em' 
      }); 
     },numb[i]*2000); 
    }); 
}); 

FIDDLE

Answer 4

試試下面的方法，我已經優化了它有點基於少數假設..但是s會給你一個想法。讓我知道它是不同的。

$(document).ready(function() { 

     var innerFadeOpt = { 
      animationtype: 'fade', 
      speed: 750, 
      timeout: 6000, 
      type: 'random_start', 
      containerheight: '1em' 
     }; 

     var ptr = 0, headerImgs = ['#header-img-1', '#header-img-2', '#header-img-3']; 

     var timer = setInterval (function() { 
      if (ptr == headerImgs.length - 1) { 
       clearInterval(timer); 
       return; 
      } 

      $(headerImgs[ptr++]).innerfade2(innerFadeOpt); 
     }, 2000); 
    } 
);