이 함수에 3 초 지연을 추가하는 방법

Question

이 코드의 목표는 페이지가로드 된 후 3 초가 지나면 잎이 튀는 효과를 만드는 것입니다. 그러나 현재 지연을 만들 수 없습니다. 아마 그것 때문에 코드 형식. 나는 내가 지금까지 가지고있는 것을 보여주기 위해 빠른 jsfiddle를 만들었다.

http://jsfiddle.net/vXpDk/

그래서 제 질문은 ... 회전 3 초 슬라이드 시작하지 않도록 함수의 지연을 만드는 방법이며 대각선 경로 대신을 만들 수있는 경우 수평 및 수직. 이처럼

var $elie = $("#leaf1"), degree = 0, timer; 

rotate(); 

function rotate() { 
    $elie.delay(2000) 
     .css({ WebkitTransform: 'rotate(' + degree + 'deg)'}) 
     .animate({ "left": "+=800px" }, 2000) 
     .fadeOut(100); 
    $elie.delay(2000) 
     .css({ '-moz-transform': 'rotate(' + degree + 'deg)'}) 
     .animate({ "left": "+=800px" }, 2000) 
     .fadeOut(100); 

    timer = setTimeout(function() { 
     ++degree; 
     rotate(); 
    },0); 
} 

Answer 1

:

여기 jsFiddle의 코드는?

var $elie = $("#leaf1"), degree = 0; 

    $elie.animate({ "left": "+=800px" }, 5000).fadeOut(100); 
    setTimeout(rotate, 3000); 

    function rotate() { 
    $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); 
    $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); 

    setTimeout(function() { 
      ++degree; rotate(); 
      }, 0); 
    } 

하고 대각선 경로 대신 수평 및 수직 를 생성 할 수있는 경우 http://jsfiddle.net/L69Ud/. 동시에

애니메이션 left 및 top는 http://jsfiddle.net/L69Ud/1/

유일한 수정은 여기 http://jsfiddle.net/vXpDk

$elie.animate({ left: "+=500px", top: "+=500px" }, 5000).fadeOut(100); 

How would you code this so that the div does not move at all for 3 seconds then begins to rotate and slide at the same time? http://jsfiddle.net/L69Ud/3/

var $elie = $("#leaf1"), degree = 0; 

    setTimeout(function() { 
     $elie.animate({ left: "+=500px", top: "+=500px" }, 5000).fadeOut(100); 
     rotate(); 
    }, 3000); 

    function rotate() { 
     $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); 
     $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); 

     setTimeout(function() { 
       ++degree; rotate(); 
       }, 0); 
    }