如何为该函数添加3秒延迟

How to add a 3 second delay to this function

本文关键字：添加 3秒 延迟 函数      更新时间：2023-09-26

我使用这段代码的目标是在页面加载后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);
}

这样？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);
    }
相关文章：