Réinitialiser cette animation jQuery

J’ai essayé de regarder

Comment réinitialiser une animation JQuery pour recommencer?

mais cela n’a pas semblé fonctionner dans ce cas.

J’essaie de redémarrer cette animation cinétique en ajoutant la fonction comme rappel sur le dernier spectacle.

Cela a fonctionné, mais la réinitialisation des objects animés n’a pas fonctionné.

Qu’est-ce que je rate? – Maintenant, le code ci-dessous fonctionne, semble-t-il

DEMO

CODE

    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!!!

Ce :

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

signifie simplement:

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

C’est pourquoi, l’ animation sera appelée plus tôt que votre animation ne sera complètement terminée. Cela signifie que vos atsortingbuts seront restaurés pendant l’animation, et non après sa fin.

Vous avez probablement besoin de ça:

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

ou:

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

Dans ce cas, l’ animation sera répétée une fois l’opération terminée , et non pas au début (ce que vous faites maintenant).