Как добавить 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 и top нав то же время http://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);
    }