페이지가로드 된 후 jQuery 애니메이션을 지연시키는 방법은 무엇입니까?

Question

여기 내 예제 : 나는 페이지가 2 초 지연 시작 후 내 두 번째 애니메이션이 시작 지연 할 http://jsfiddle.net/UuD8s/5/

$("#transition") 
    .delay(5000) 
    .animate({ width: "400px" }, { duration: 1000, queue: true }); 

$("#transition") 
    .delay(2000) 
    .animate({ left: "100px" }, { duration: 1000, queue: true });​ 

. 첫 번째 애니메이션 이후에 문제가 발생합니다. queue이 false으로 설정된 경우 지연이 전혀 없습니다.

페이지 실행 2 초 후 어떻게 지연 시키나요? 페이지 출시 false로 queue를 설정 한 후 애니메이션을 지연하고 setTimeout이 초 사용하기 위해서는

Answer 1

:

$("#transition") 
    .delay(5000) 
    .animate({width: "400px"}, {duration: 1000, queue: true}); 

setTimeout(function() { 

    $("#transition").delay(2000).animate({ left: "100px" }, { 
     duration: 1000, 
     queue: false 
    }); 

}, 2000);​ 

는 여기 live demo입니다.

Answer 2

setTimeout() 메서드를 사용하면 JavaScript 함수를 지연시킬 수 있습니다.

$("#transition").delay(5000).animate({width: "400px"}, {duration: 1000, queue: true}); 
setTimeout(function() { 
    $("#transition").delay(2000).animate({left: "100px"}, {duration: 1000, queue: false}); 
}, 2000); 

Answer 3

두 번째 애니메이션 (왼쪽)을 시작한 후 2 초가 지나야합니다. 이 작업은 1 초가 걸릴 것입니다. 당신은 첫 발사가 발사 후 5 초 후에 시작되기를 원한다.

그래서 당신이 할 수있는 일이이 상황을 해결 않습니다

$("#transition").delay(2000).animate({left: "100px"}, {duration: 1000}); 
$("#transition").delay(2000).animate({width: "400px"}, {duration: 1000}); 

http://jsfiddle.net/UuD8s/7/

... 그 폭 하나에 개막 왼쪽 하나가 완료 이초 후에 있도록 최대를 대기 당신 위의 경우에는 동시에 실행되지 않지만 동시에 실행하려는 경우 (예 : 폭이 움직임의 절반을 축소해야 함) 그러면 작동하지 않습니다.