重置并循环JQuery动画

Question

我正在将HTML对象动画化，使其看起来像飘落的雪花，但在循环上遇到了一些问题。

这是我的代码：

//animation function
function snowflakeAnimate(index) {
    //random numbers
    //time
    var nTime = randomRange(9000,35000);
    var randTime = Math.round(nTime);

    //delay
    var nDelay = randomRange(200,35000);
    var randDelay = Math.round(nDelay);

    $(this).delay(randDelay).animate({
        marginTop: "+600px"
    }, randTime);
};

$(".tweet").each(snowflakeAnimate);

目前它所做的只是通过增加顶部边距到600来使雪花动起来。延迟和动画速度是通过生成随机数来设置的。我的问题是如何将雪花重置到顶部，然后再次运行动画，以使其不断下落。

- Forxs

---

你是想做类似这个的东西吗：http://www.somethinghitme.com/2010/04/29/jquery-snowfall-plugin-1-3/? - Book Of Zeus

@BookOfZeus 是的，谁写了那个插件就是太棒了！:P - Loktar

Answer 1

我认为jQuery animate() 的 step 回调函数 在这里是你的朋友。

- Leniel Maccaferri

---

谢谢，但我无法使其循环...只能重置。目前我所做的是安装Jquery Timers 插件，这解决了问题。 - Forxs

Answer 2

这就是我做的方式 - 只需要正确获取函数调用本身的语法...

    function snowflakeAnimate(sfAnimate) {

        //Animation
        $(sfAnimate).addClass("moving").delay(randDelay).animate({
            marginTop: 600
        }, 20000, function() {
            $(sfAnimate).animate({
                marginTop: -150
            }, 0, function() {
                snowflakeAnimate(sfAnimate);
            });
        });
}

这就是无限循环动画。如果您想看它的效果，可以在traxmas.realadventure.co.uk上查看。

- Forxs