如何在此功能上添加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); 
    }