重置并循环jquery动画

时间:2011-11-25 14:35:13

标签: jquery animation loops

我正在制作一些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来设置雪花的动画效果。通过生成随机数来设置延迟和动画速度。我的问题是如何将雪花重置到顶部,然后再次运行动画,以便它永远不会停止下降。

2 个答案:

答案 0 :(得分:0)

我认为The jQuery animate() step callback function是你的朋友。

答案 1 :(得分:0)

我就是这样做的 - 只需要为调用自身的函数获得正确的语法......

    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

查看