Making Snowflakes in jQuery

Question

I created snowflakes in jquery. Creating and deleting a div can cause the script to not respond. Right now I tried jquery using animate() I want to generate flakes with 20 at the same time as the page is loading. I'm not sure when I tried this method it might cause this unresponsive value (browser is too slow)

Here is the new jquery code

 function jquerysnow() { snowCount = 20; 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(); }); } jquerysnow(); 

See here fiddle

Now it shows one flake at a time, as soon as the flakes disappear, they are generated further. How can I generate multiple flakes without a script response.

Answer 1

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/390/

Answer 2

I just finished writing an article on this subject, and I thought I would share it.

This is not very jQuery-heavy, although mostly pure old good javascript. But it produces a pretty decent effect of falling snow.

So, for everyone who is interested, here it is!