javascript - 如何为此功能添加 3 秒延迟

Question

我使用此代码的目标是创建页面加载后 3 秒后树叶被吹走的效果，但目前我无法创建延迟。也许是因为代码格式。我制作了快速的 jsfiddle 来演示我目前拥有的东西。

http://jsfiddle.net/vXpDk/

所以我的问题是如何创建函数延迟，使其在 3 秒内不会开始旋转和滑动...以及是否可以创建对 Angular 线路径而不是水平和垂直路径。

这是来自 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);
    }

and if it is possible to to create diagonal paths instead of horizontal and vertical.

同时为 left 和 top 设置动画 http://jsfiddle.net/L69Ud/1/

这里唯一的修改是

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

如何编写代码，使 div 在 3 秒内完全不动，然后开始同时旋转和滑动？ 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);
    }