애니메이션 간 지연

Question

각 애니메이션 세트의 시작 부분에 지연을 추가하려고합니다. 애니메이션은 잘 작동하지만 .anel (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

호출 - 예 : animate() 전화 자체는 것을

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

주 그래서 당신이 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/