Creating a random falling object in jQuery

Question

I am trying to make a div fall from top to bottom. Here is the code I tried, but it does not satisfy my needs. I want to generate the 20th div, once ready, and then make the 20 div fall continuously from top to bottom. Is it possible to do this 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); 

Significant appreciation of your reference.

thanks

Answer 1

Not sure if this is what you want.

I revive 20 snowflakes, wait for the animation to finish for all of them , and then restart 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 only 20 partitions only once and revitalizes 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, which initializes left after the animation for each snowflake, looks more natural in my opinion. The delay also changed from

 Math.random() + 5000 

to

 Math.random()*-2500 + 5000 

demonstration

Answer 2

It's simple. Your function design should be like this.

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

Answer 3

check this, quite simply i just added a function that runs jquerysnow () and then wit random time again

updated code now it just creates 20 snow flakes

 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/