Question

我写了一个小动画脚本，几个雪花落下。这一切都很好，但我想知道天气我可以让它更有效率，因为我不认为自己是一个优秀的程序员，我敢肯定我在这里或那里犯了一些错误。只是想学习。先感谢您！这是jsfiddle

的链接

或脚本本身：

    $(document).ready(function ()
{
     var arr = ["1000", "2000", "3000", "4000"];
     var pause = 0;
    var myDiv = $('div');
    function scroll()
    {
       if (pause == 0)
       {
        myDiv.each(function (index)
        {
            myDiv.eq(index).delay(arr[index]).animate({"margin-top":"150px","opacity":"1"},
           {
            duration:3000,
            queue: true,
               complete: function ()
               {
                   $(this).css({"margin-top":"0","opacity":"0"});
                 pause = 0;
                 scroll();  
               }
           });

        });
    }  


    }
    scroll();
});

Answer 1

http://jsfiddle.net/2gxkX/9/

我在这里做了一些调整。总的来说，你的代码很好。

myDiv - ＆gt; myDivs，因为它是多个
myDivs.eq(index)已替换为$(this)
在链接上我添加了新行以使其更具可读性
我将"margin-top"替换为top，因为它们位于绝对位置
"0"等替换为0，因为jquery知道如何处理数字
删除了数组以支持更简单的表达式
我自己调用了函数

修改简单版本：http://jsfiddle.net/2gxkX/10/

Answer 2

下面是一个示例，说明如何绑定自定义事件，并在每个动画结束时简单地递归调用事件以产生相同的效果。在JS引擎上，它可能在语义上更干净，更容易：

$("div").each(function(i, el) {
    $(el).bind('snowfall', function() { // bind a custom event
        $(this).animate({
            "top": 150,
            "opacity": 1
        }, 3000, function() { // callback to reset CSS styling and recurse
            $(this).css({
                top: 0,
                opacity: 0
            }).delay((i + 1) * 1000).trigger('snowfall'); // recurse
        })
    }).delay((i + 1) * 1000).trigger('snowfall'); // initial fire
});

上面发生的是每个元素都有一个“降雪”事件处理程序绑定导致动画。在动画结束时，有一个回叫延迟给定的时间量，然后触发随后的降雪事件。绑定完成后，将使用所选的延迟，并启动第一个触发器以开始递归动画。

希望你觉得这很有用！

这是fiddle example。

编辑： @generalhenry对阵列提出了最好的观点;编辑代码以反映明智的变化。

使动画脚本更有效率

2 个答案: