Question

我在jquery中创建了雪花。创建和删除div可能会导致脚本无法响应。现在我用animate()尝试了jquery 我想在页面加载的同时生成20个片。我不确定我什么时候尝试这种方法可能会导致这种反应迟钝（浏览器速度太慢）

这是新的jquery代码

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

在此处看到 fiddle

现在它一次显示一片薄片，一旦薄片消失，它就会产生下一个。如何在没有无响应的脚本的情况下生成多个薄片。

Answer 1

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

现在更新了代码，它只会创建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/390/

Answer 2

我刚刚写完一篇关于这个主题的文章，我想我会分享。

虽然它不是非常jQuery，但主要是纯粹的旧javascript。但它会产生相当不错的降雪效果。

所以，对于任何有兴趣的人，here it goes!

在Jquery中创建雪花

2 个答案: