javascript - 在 Jquery 中创建随机坠落对象

Question

我试图让 div 从上到下下降。这是我尝试过的代码，但它不能满足我的需求。我想在准备好后生成 20 div，然后如何使 20 div 从上到下不断下降。是否可以在 jquery 中做到这一点。 http://jsfiddle.net/MzVFA/ 这里是代码

  function fallingSnow() {

        var snowflake = $('<div class="snowflakes"></div>');
        $('#snowZone').prepend(snowflake);
        snowX = Math.floor(Math.random() * $('#site').width());
        snowSpd = Math.floor(Math.random() + 5000);

        snowflake.css({'left':snowX+'px'});
        snowflake.animate({
            top: "500px",
            opacity : "0",

        }, snowSpd, function(){
            $(this).remove();
            fallingSnow();
        });

    }
    var timer = Math.floor(Math.random() +1000);

    window.setInterval(function(){
        fallingSnow();
    }, timer);

非常感谢您的帮助。

谢谢

Answer 1

不确定这是否是您想要的。

我正在为 20 片雪花制作动画，等到所有雪花都完成动画，然后重新开始。

jsfiddle

function fallingSnow() {

    var $snowflakes = $(), qt = 20;

    for (var i = 0; i < qt; ++i) {
        var $snowflake = $('<div class="snowflakes"></div>');
        $snowflake.css({
            'left': (Math.random() * $('#site').width()) + 'px',
            'top': (- Math.random() * $('#site').height()) + 'px'
        });
        // add this snowflake to the set of snowflakes
        $snowflakes = $snowflakes.add($snowflake);
    }
    $('#snowZone').prepend($snowflakes);

    $snowflakes.animate({
        top: "500px",
        opacity : "0",
    }, Math.random() + 5000, function(){
        $(this).remove();
        // run again when all 20 snowflakes hit the floor
        if (--qt < 1) {
            fallingSnow();
        }
    });
}
fallingSnow();

---

更新

这个版本只创建了 20 个 div，并且一次又一次地为它们设置动画。

jsFiddle

    function fallingSnow() {
        var $snowflakes = $(),
            createSnowflakes = function () {
                var qt = 20;
                for (var i = 0; i < qt; ++i) {
                    var $snowflake = $('<div class="snowflakes"></div>');
                    $snowflake.css({
                        'left': (Math.random() * $('#site').width()) + 'px',
                        'top': (- Math.random() * $('#site').height()) + 'px'
                    });
                    // add this snowflake to the set of snowflakes
                    $snowflakes = $snowflakes.add($snowflake);
                }
                $('#snowZone').prepend($snowflakes);
            },

            runSnowStorm = function() {
                $snowflakes.each(function() {

                    var singleAnimation = function($flake) {
                        $flake.animate({
                            top: "500px",
                            opacity : "0",
                        }, Math.random() + 5000, function(){
                            // this particular snow flake has finished, restart again
                            $flake.css({
                                'top': (- Math.random() * $('#site').height()) + 'px',
                                'opacity': 1
                            });
                            singleAnimation($flake);
                        });
                    };
                    singleAnimation($(this));
                });
        };

        createSnowflakes();
        runSnowStorm();
    }
    fallingSnow();

---

更新2

left在我看来，一旦为每个雪花完成动画，就会初始化这个动画，看起来更自然。也改变了延迟

Math.random() + 5000

至

Math.random()*-2500 + 5000

演示

Answer 2

这很简单。你的功能设计一定是这样的。

function snowflake()
{

if($(".snowflakes").length <= 20)
 { 
    generate_random_snowflake();
 }
else
 {
    call_random_snowflake();
 }

}

Answer 3

检查一下，非常简单，我只是添加了一个触发 jquerysnow() 的函数，然后以随机时间再次调用自身

更新代码现在它只会创建 20 个雪花

snowCount = 0;
function snowFlakes(){
    console.log(snowCount);
    if(snowCount > 20){

        return false
    }else{
    var randomTime = Math.floor(Math.random() * (500) * 2);
    setTimeout(function(){
        snowCount = snowCount +1;
        jquerysnow();
       snowFlakes();
    },randomTime);
    }
}
function jquerysnow() {


       var snow = $('<div class="snow"></div>');
        $('#snowflakes').prepend(snow);
        snowX = Math.floor(Math.random() * $('#snowflakes').width());
        snowSpd = Math.floor(Math.random() * (500) * 20);

        snow.css({'left':snowX+'px'});
    snow.html('*');
        snow.animate({
            top: "500px",
            opacity : "0",

        }, 2000, function(){
            $(this).remove();
            //jquerysnow();
        });



}

snowFlakes()

http://jsfiddle.net/v7LWx/22/