動畫之間的延遲

Question

我試圖在每組動畫的開頭添加一個延遲。動畫工作正常，但是當我添加.delay（5000）之前.animate什麼都不起作用。

$(document).ready(function(){ 

    -->add .delay here <--- 

    $("#hand").animate({left:'-=300px'},1500); 
    $("#hand").animate({left:'+=300px'},1000); 

    -->add .delay here <--- 

    $("#hand").animate({left:'-=300px'},1500 ); 
    $("#hand").animate({left:'+=300px'},1000); 

    $("#hand").animate({left:'-=300px'},1500 ); 
    $("#hand").animate({left:'+=300px'},1000); 

    }); 

這裏是否有一組代碼用於相同的功能？我需要它來無限動畫。

Answer 1

您 必須 可以使用鏈接的動畫/延遲要求 - 例如：

$("#hand").animate({left:'-=300px'},1500) 
      .delay(5000) 
      .animate({left:'+=300px'},1500); 

注意，animate()調用本身是無阻塞的，所以你已經在delay()調用，以適應該或相反，將代碼移至完成處理程序。 看到這個working JSFiddle example。

爲了使這個運行「永遠」你可以把它包裝成setInterval()：

setInterval(function() { 
    $("#hand").animate({ left: '-=300px'}, 1500) 
       .delay(5000) 
       .animate({left: '+=300px'}, 1000); 
}, 10000); 

Answer 2

你可以做一個遞歸函數調用，使動畫無限循環。

function recursive_animation() { 
    $("#hand").delay(3000) 
     .animate({left:'-=300px'},1500) 
     .animate({left:'+=300px'},1000, recursive_animation); 
} 

recursive_animation(); 

實施例：http://jsfiddle.net/j3LLe/