Сбросить ЭТУ 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 будет повторяться после того, как она будет закончена , а не когда она будет запущена (что вы делаете сейчас).