重置这个jQuery动画

我试着看看

如何重置jquery动画重新开始?

但在这种情况下似乎没有用。

我试图通过在最后一个节目中添加函数作为回调来重新启动此动态动画 。

这工作,但重置动画对象没有。

我错过了什么? – 现在看来下面的代码确实有效

DEMO

    jQuery Powered Kinetic Text Animation     function animation() { // my attempt to reset $('.first').removeAttr('style'); $('.second').removeAttr('style'); $('.shadow1').removeAttr('style'); $('.second .a').removeAttr('style'); $('.second .b').removeAttr('style'); $('.second .c').removeAttr('style'); $('.third').removeAttr('style'); $('.fourth').removeAttr('style'); $('.fifth').removeAttr('style'); $('.fifth .a').removeAttr('style'); $('.fifth .b').removeAttr('style'); $('.fifth .c').removeAttr('style'); $('.fifth .d').removeAttr('style'); $('.sixth').removeAttr('style'); // end reset attempt // original code $('.first').animate({right: '1500px'}, 3000); $('.first').animate({left: '1000px'}, 500); $('.shadow1').delay(3800).show(1000); $('.second .a').delay(3800).show(500); $('.second .b').delay(4000).show(500); $('.second .c').delay(4200).show(500); $('.third').delay(6200).animate({bottom: '125px'}, 500); $('.shadow1').delay(1800).hide(500); $('.second .a').delay(3500).animate({bottom: '30px'}, 300); $('.second .b').delay(3800).animate({bottom: '30px'}, 300); $('.second .c').delay(4100).animate({bottom: '30px'}, 300); $('.second').delay(10000).hide(500); $('.third').delay(3500).animate({top: '125px'}, 500); $('.fourth').delay(10500).show(500); $('.fifth .a').delay(12000).animate({left: '85px'}, 300); $('.fifth .b').delay(12300).animate({left: '95px'}, 300); $('.fifth .c').delay(12600).animate({left: '180px'}, 300); $('.fifth .d').delay(12900).animate({left: '100px'}, 300); $('.fourth').delay(4000).animate({'font-size': '150px', 'bottom': '50px', 'right': '50px'}, 300); $('.fifth').delay(15000).hide(500); $('.fourth').delay(2000).hide(500); $('.sixth').delay(18000).show(1000,function() { setTimeout(animation,2000) }); } $(function() { animation() });    

Kinetic Text Animation using jQuery

Welcome to my try at making a small kinetic animation using jquery. It doesn't include many fancy things, but this is just something i wanted to try and looks like I've done it. To play this, click the play button below (not visible? Enable javascript or wait for it to load). You need javascript enabled and a @font-face supporting browser.

The animation works in the black box, which is 650x400 pixels. So make sure the visible portion of your screen fits it. This will be fine on a least of 1024x768 pixel resolution.

Read the whole article here!

I hope you like it :)

PlayPlay!

Do you know?
WHAT
THIS
IS?
DO YOU KNOW?
No?
Are
You
Kidding
Me?
This is a kinetic animation, achieved using
jQuery!!!

这个 :

 $('.sixth').delay(18000).show(1000, setTimeout(function() { // my change to loop the animation animation() },2000)); 

只是意味着:

 $('.sixth').delay(18000).show(1000, timeoutIdThatReturnedBySetTimeoutFunction); // setTimeout(function() { // my change to loop the animation animation() },2000); 

这就是为什么animation将在动画完全完成之前调用。这意味着你的属性将在动画期间恢复,而不是在动画结束之后恢复。

可能你需要这个:

 $('.sixth').delay(18000).show(1000,function(){ setTimeout(function() { // my change to loop the animation animation() },2000); }); 

要么:

 $('.sixth').delay(18000).show(1000,function(){ setTimeout( animation, 2000 ); }); 

在这种情况下, animation将在完成后重复,而不是在它将被启动时 (你现在在做什么)。