在Jquery中创建随机下降对象 [英] Create Random Falling Object in Jquery

问题描述

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

非常感谢您的帮助。

解决方案

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

动画处理20个雪花，等待动画完成所有，然后重新开始。

jsfiddle

  ）{
 
 var $ snowflakes = $（），qt = 20; 
 
 for（var i = 0; i  var $ snowflake = $（'< div class =snowflakes>< / div> ;'）; 
 $ snowflake.css（{
'left'：（Math.random（）* $（'＃site'）。width（））+'px'，
'top'： （ -  Math.random（）* $（'＃site'）。height（））+'px'
}）; 
 //将此雪花添加到雪花集
 $ snowflakes = $ snowflakes.add（$ snowflake）; 
} 
 $（'＃snowZone'）。prepend（$ snowflakes）; 
 
 $ snowflakes.animate（{
 top：500px，
 opacity：0，
}，Math.random（）+ 5000，function ）{
 $（this）.remove（）; 
 //当所有20个雪花都落在地板上时再次运行
 if（--qt <1）{
 fallingSnow ）; 
} 
}）; 
} 
 fallingSnow（）; 
 





---

更新 p>

此版本只会创建20个div，并重复动画。

jsFiddle

  function fallingSnow （）{
 var $ snowflakes = $（），
 createSnowflakes = function（）{
 var qt = 20; 
 for（var i = 0; i  var $ snowflake = $（'< div class =snowflakes>< / div>'） 
 $ snowflake.css（{
'left'：（Math.random（）* $（'＃site'）。width（））+'px'，
'top'： （ -  Math.random（）* $（'＃site'）。height（））+'px'
}）; 
 //将此雪花添加到雪花集
 $ 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（）{
 //这个特殊的雪花已经完成，重新启动
 $ flake.css（{
'top'：（ -  Math.random（）* $（'＃site'）。height ）+'px'，
'opacity'：1 
}）; 
 singleAnimation（$ flake）; 
}）; 
}; 
 singleAnimation （$（this））; 
}）; 
}; 
 
 createSnowflakes（）; 
 runSnowStorm（）; 
} 
 fallingSnow（）; 
 





---

Update2 p>

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

  Math.random（）+ 5000 
  

到

  Math.random -2500 + 5000 
  

演示

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

  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

解决方案

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.

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.

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

---

Update2

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

Math.random() + 5000

to

Math.random()*-2500 + 5000

demo

这篇关于在Jquery中创建随机下降对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！