复位和循环jQuery的动画 [英] Reset and loop jquery animation

问题描述

我的动画一些HTML对象看起来像雪花下降但我有环路一些麻烦。

下面是我的code：

  //动画功能
功能snowflakeAnimate（指数）{
    //随机数
    //时间
    变种n时间= randomRange（9000,35000）;
    VAR randTime = Math.round（n时间）;    //延迟
    VAR nDelay = randomRange（200,35000）;
    VAR randDelay = Math.round（nDelay）;    $（本）.delay（randDelay）.animate（{
        marginTop：+ 600px的
    }，randTime）;
};$（鸣叫）各（snowflakeAnimate）。
 

因此​​，所有它此刻正在做的是通过增加上边距为600的延迟和动画速度通过产生一个随机数设置动画雪花。我的问题是我怎么雪花重置到顶部，然后再次运行动画所以它永远不会停止下滑。

解决方案

这是我是如何做到的 - 只是要得到函数调用自身的语法正确的...

 函数snowflakeAnimate（sfAnimate）{        //动画
        $（sfAnimate）.addClass（动）。延迟（randDelay）.animate（{
            marginTop：600
        }，20000，函数（）{
            $（sfAnimate）.animate（{
                marginTop：-150
            } 0，函数（）{
                snowflakeAnimate（sfAnimate）;
            }）;
        }）;
}
 

所以它是...一个无限循环的动画。如果你想看到它在行动，你可以在 traxmas.realadventure.co.uk

I am animating some HTML objects to look like snowflakes falling but am having some trouble on the loop.

Here is my code:

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

So all it is doing at the moment is animating a snowflake by increasing the top margin to 600. The delay and animation speed are set by generating a random number. My question is how do I reset the snowflake to the top and then run the animation again so it never stops falling.

解决方案

This is how I did it - just had to get the syntax right for the function calling itself...

    function snowflakeAnimate(sfAnimate) {

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

So there it is...an infinite loop animation. If you want to see it in action you can check it out at traxmas.realadventure.co.uk

这篇关于复位和循环jQuery的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！