jQuery的循環動畫跳過去動畫

首先，我試圖創建一個循環動畫這樣fiddle：jQuery的循環動畫跳過去動畫

function rotator() { 
    $('#foo').stop(true).delay(500).fadeIn('slow').delay(2500).fadeOut('slow',rotator); 
} 
$('#foo').hide(); 
rotator();

這似乎跳過第一次迭代後的延遲。

所以，我想這個fiddle：

function rotator() { 
    $('#foo').stop(true).delay(500).fadeIn('slow').delay(2500).fadeOut('slow',rotator); 
} 
$('#foo').hide(); 
rotator();

在這種情況下，淡入似乎直接跳到第一次迭代後顯現。

我很難過。所有這些操作應該是fx隊列的一部分。即使沒有，我也無法解釋爲什麼一個fadeIn會變成一個節目。有任何想法嗎？

來源

2012-05-09 Kris Braun

這是更多的影響到你要找的：

function rotator() { 
    $('#foo').delay(500).fadeIn('slow', function() { 
     $(this).delay(2500).fadeOut('slow', rotator); 
    }); 
} 
$('#foo').hide(); 
rotator();

更新：圖我應該解釋一下爲什麼你的代碼是有問題的。在jQuery中，動畫是異步的（即非阻塞）。所以你的代碼同時排隊動畫，但只是在未來的某個時候才運行。您必須在回調中運行以下動畫，以確保在前一個動畫完成之前它不會觸發。

另一個更新：試了下面的代碼，它似乎工作。給它一個：

function rotator() { 
    $('#foo').delay(500).fadeIn('slow').delay(2500).fadeOut('slow', rotator); 
} 
$('#foo').hide(); 
rotator();

給它一個去，讓我知道它是否工作。

來源

2012-05-09 06:07:00

是的，這有效，並且解釋有幫助。我曾經以爲所有的隊列操作都放在隊列中，所以我的鏈接函數會讓整個隊列按順序運行。不過，我想我仍然錯過了一些東西。爲什麼可以延遲和淡入進行鏈接，而後續的淡出輸出必須通過回調而不是在FX隊列中完成？ –

剛剛更新了一個與您的類似的代碼片段，但似乎適用於我。讓我知道如果它不。 –

第二次更新確實有效，這幾乎是我必須開始的，使問題變得非常清楚。這是我的呼籲，停止在回調中，以某種方式搞亂/破壞動畫隊列，這在我思考時並不令人意外。我只是將該邏輯移到回調之外，用於我需要的其他情況。謝謝！ –

首先想到的是，fadeIn/fadeOut是異步的..所以你會立即去下一個鏈接命令。

例如，在你的第一套代碼，如果你這樣做：

function rotator() { 
    $('#foo').stop(true).delay(500).fadeIn('slow', function(){ 
     $('#foo').delay(2500).fadeOut('slow',rotator); 
    }) 
} 
$('#foo').hide(); 
rotator();

你會看到在2500ms的延遲。

來源

2012-05-09 06:05:48

謝謝！如上所述，這確實可以正常工作。 –

jQuery的循環動畫跳過去動畫

回答

相關問題