在JQuery中创建雪花片 [英] Create Snow Flakes in Jquery

问题描述

我在jquery中创建了雪花。创建和删除div可能会导致脚本无响应。现在我试着jQuery与 animate（）
我想在页面加载的同一时间生成与20片。我不确定当我尝试这种方法可能会导致这种反应迟钝的意思（浏览器已经变得太慢）

这是新的jquery代码

 函数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（）; 
  

在这里看到 小提琴

现在一旦片状物自行消失，接下来生成。
如何在没有无响应脚本的情况下生成多个片。

解决方案

检查了这一点，非常简单，我只是添加了一个函数这触发了jquerysnow（），然后再次随机调用自己的时间

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

  snowCount = 0; 
函数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）; 
 
 
函数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（）; 
}）; 
 
 
 
 
 $ b snowFlakes（）
  

http://jsfiddle.net/v7LWx/390/ p>

I created snow flakes in jquery.Creating and removing a div may cause the script to unresponsive. Right now i tried jquery with animate() I want to generate the flakes with 20 at a same time of page load. I am not sure when i tried this method may cause this unresponsive mean (Browser has get 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 this here a fiddle

Now it showing one flake at a time once the flakes disappear itself it generate next. How can i generate multiple flakes without unresponsive script.

解决方案

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

updated code now it will just create 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/

这篇关于在JQuery中创建雪花片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！