循環2 jQuery的動畫初始延遲在一個

Question

我有2個jQuery動畫。我希望他們都無限循環。第二次動畫需要延遲3秒，但只有第一次觸發。一旦第二個動畫開始，就不需要拖延。

我已經創建了一個條碼版本的代碼，目前爲止使其更清晰。

的HTML：

<div class="block1"></div> 
<div class="block2"></div> 

的CSS：

div.block1, 
div.block2 { 
    position: absolute; 
    display: block; 
    top: -100%; 
    height: 100%; 
    width: 100%; } 

jQuery的

function block1(){ 
    $("#block1").animate({ top: '100%'}, 6000, 'linear', function(){ $(this).css('top', '-100%') }); 
    block1(); 
} 

function block2(){ 
    $("#block2").animate({ top: '100%'}, 6000, 'linear', function(){ $(this).css('top', '-100%') }); 
    block2(); 
} 

block1(); 
block2(); 

所以我有2個問題與此有關。首先當我嘗試調用第二個函數（block2）時，它不起作用。其次，我不知道如何應用我之後的延遲。有什麼建議麼？

Answer 1

您可以使用此代碼來設置最初的延遲，然後動畫將毫無延遲地無限工作。 setTimeout將在指定的延遲時間內調用block1函數，一旦第一個動畫完成，它將調用第二個動畫，這將繼續無限期地繼續。

JS：

function block1() { 
    $(".block1").animate({ 
     top: '+=10px' 
    }, 600, 'linear', function() { 
     block2(); 
    }); 
} 

function block2() { 
    $(".block2").animate({ 
     top: '+=10px' 
    }, 600, 'linear', function() { 
     block1(); 
    }); 
} 

setTimeout(block1, 3000);​ 

CSS：

div.block1, div.block2 { 
    position: absolute; 
    display: block; 
    top: 0; 
    height: 100px; 
    width: 100px; 
    background-color: red; 
} 

div.block2 { top: 200px; } 

HTML：

<div class="block1">Block 1</div> 
<div class="block2">Block 2</div>​ 

WORKING DEMO