javascript 在 Jquery 中创建随机下落的对象

Create Random Falling Object in Jquery

提问by Jose Rui Santos

I trying to make the div fall from top to bottom. Here is the code that i tried but it doesn't satisfy my needs .I want to generate the 20 div once ready then how to make that 20 div falling continuously from top to bottom consistently. Is it possible to do that in jquery. http://jsfiddle.net/MzVFA/Here is the code

我试图让 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);

Much Appreciate your Help.

非常感谢您的帮助。

Thanks

谢谢

回答by Jose Rui Santos

Not sure if this is what you want.

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

I am animating 20 snowflakes, wait until animation finishes for all of them, then restart all over again.

我正在为 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();

---

---

Update

更新

This version creates 20 divs only once, and animate them again and again.

此版本仅创建 20 个 div，并一次又一次地为它们设置动画。

jsFiddle

js小提琴

    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();

---

---

Update2

更新2

This one that initializes the leftonce the animation is done for each snowflake, looks more natural in my opinion. Also changed the delay from

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

Math.random() + 5000

to

到

Math.random()*-2500 + 5000

demo

演示

回答by avalkab

This is simple. Your design of function must be this.

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

function snowflake()
{

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

}

回答by john Smith

check this out, pretty simple i just added a function that triggers jquerysnow() and then calls itself again wit random time

看看这个，很简单，我只是添加了一个触发 jquerysnow() 的函数，然后随机时间再次调用自己

updated code now it will just create 20 snow flakes

更新的代码现在只会创建 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/

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