使用setTimeout延遲jQuery動畫

我正在處理圖像上的某些轉換，當用戶按下按鈕移動到下一個圖像時。如果有多幅圖像彼此相鄰，且圖像非常窄，則這些圖像將同時進行過渡。所以我檢查圖像上的寬度，並將精簡的圖像添加到數組中，然後在數組中的每個對象上運行轉換。我想在數組中的每個圖像的動畫之間創建一個小的延遲，所以我試圖在1秒超時後運行我的jQuery.animate。使用setTimeout延遲jQuery動畫

下面是我試圖讓超時沒有成功的工作方式：

for (i=0; i < set.length; i++) { 
    if (i != 0) { 
     setTimeout(function() { set[i].transitionOut($('#gallery'), 562) }, 100); 
    } else { 
     set[i].transitionOut($('#gallery'), 562); 
    } 
}

for (i=0; i < set.length; i++) { 
    if (i != 0) { 
     function tempTransition() { 
      set[i].transitionOut($('#gallery'), 562); 
     } 
     setTimeout(tempTransition, 100); 
    } else { 
     set[i].transitionOut($('#gallery'), 562); 
    } 
}

for (i=0; i < set.length; i++) { 
    if (i != 0) { 
     setTimeout('function() { set[i].transitionOut($("#gallery"), 562) }', 100); 
    } else { 
     set[i].transitionOut($('#gallery'), 562); 
    } 
}

transitionOut（）：

jQuery.fn.transitionOut = function(parent, height) { 
    this.animate({ 
     height: '0', 
     top: height + 'px' 
    }, function() { 
     $(this).remove(); 
    }); 
}

我得到它使用CMS的閉包例子。但是，現在我遇到了一個新問題。轉換隻發生在第二張圖片上。當有三個圖像就會去動畫圖像1，延遲，動畫圖像2，動畫圖像3.有2和3

這裏是新的代碼之間沒有延遲：

for (i=0; i < set.length; i++) { 
    (function(i) { 
     if (i != 0) { 

      function tempTransition() { 
       set[i].transitionOut($('#gallery'), 562); 
      } 
      setTimeout(tempTransition, 200); 
     } else { 
      set[i].transitionOut($('#gallery'), 562); 
     } 
    })(i); 
}

來源

2009-11-30 Jonnie

什麼是'transitionOut'功能？你能提供這些代碼嗎？ – 2009-11-30 03:06:36

當然。我已將它添加到我原來的問題中。 – Jonnie 2009-11-30 13:15:12

通過看你的代碼，我覺得你有yet another closure problem，也許是最常見的問題，當人們用循環和嵌套函數工作，我已經看到了。

的i變量，您的setTimeout回調函數指，是相同（因爲JavaScript有隻函數作用域的，而不是塊範圍），和由時間的那些功能是異步執行的，環路已經對於所有使用setTimeout的情況，已完成，和i變量將包含set.length - 1。

像往常一樣，嘗試用另一種方式停止捕捉i變量：

for (var i=0; i < set.length; i++) { 
    (function (i) { 
    if (i != 0) { 
     setTimeout(function() { set[i].transitionOut($('#gallery'), 562) }, 100); 
    } else { 
     set[i].transitionOut($('#gallery'), 562); 
    } 
    })(i); 
}

來源

2009-11-30 04:10:52 CMS

謝謝。這幫助我克服了第一個障礙。 :) – Jonnie 2009-11-30 18:43:32

使用超時是當涉及到定時動畫/效果時，它會欺騙你。

我沒有測試你的代碼，但通過瀏覽它，我注意到你正在使用setTimeout沒有任何東西來清除它們。

當用戶在'延遲'期間觸發事件時會發生什麼？你必須實施一些措施來管理。

對不起，我現在沒有你的答案，也許當我有更多的時間後，或有人出來一個更優雅的解決方案。

來源

2009-11-30 02:49:51

jquery fadeOut http://docs.jquery.com/Effects/fadeOut讓你創建一個回調，這是一個你可以在fadeOut完成時運行的函數。所以如果你想要的話，你可以把漸變連在一起，所以當一個完成時它會調用下一個漸變。如果這不是你正在尋找的，我可能會誤解你的問題。

另外，在示例3中，我認爲您希望像這樣編寫它，並且沒有將函數定義傳遞給setTimeout，因爲這樣做不會執行任何操作。

setTimeout('set[i].transitionOut($("#gallery"), 562)', 100);

來源

2009-11-30 03:02:37

使用setTimeout延遲jQuery動畫

回答

相關問題