如何在此功能上添加3秒的延遲

Question

此代碼的目標是在頁面加載後創建葉片吹走3秒的效果，但目前我無法創建延遲。也許是因爲代碼格式。我讓我快速jsfiddle展示我到目前爲止。

http://jsfiddle.net/vXpDk/

所以我的問題是如何建立功能的延遲，因此它不會開始旋轉，3秒幻燈片......如果有可能創造對角線路徑，而不是水平和垂直。

這裏是從的jsfiddle代碼：

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

喜歡這個？ http://jsfiddle.net/L69Ud/

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); 
    } 

，如果它能夠創建對角線路徑，而不是 水平和垂直。同時

動畫left和tophttp://jsfiddle.net/L69Ud/1/

唯一的修改這裏是

$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); 
    }