Comment réinitialiser une animation JQuery pour recommencer?

J’ai construit un bon morceau de code, des animations et des événements de clic / survol, une petite rangée d’entre eux. J’ai l’intention de l’utiliser sur plusieurs documents HTML (c’est un jeu, vous devez obtenir la bonne réponse et passer à la question suivante), construits ensemble dans un autre fichier HTML avec curseur de page entière (je ne veux pas charger plusieurs DOM la question non résolue est: comment réinitialiser le code sans le recharger? comment faire pour tout effacer jusqu’à présent et recommencer? Je suis un débutant, construisant des choses sur d’autres extraits. J’imagine que ce doit être quelque chose de si simple et fondamental que personne ne y a répondu … Il n’est pas bon d’animer tout ce qui a été fait auparavant: trop de choses et trop de liens.

J’avais une animation qui gardait la position à chaque exécution du code. Pour le réparer, j’ai utilisé:

function(){ $('.target').removeAttr('style'); } 

donc mon code était quelque chose comme:

 $('#target').animate({ opacity: 'toggle', top: '+=100', }, 1000, function() { $('#target').removeAttr('style'); }); 

Pour jQuery, vous pouvez utiliser .finish (). Avant cela, vous avez besoin de quelques parameters pour la méthode .stop ().

 $(element).stop(true, true); 

https://api.jquery.com/stop/

$ (element) .stop (), puis réexécutez votre animation.

Il n’y a pas de réponse facile, car tout dépend de ce que vous avez fait, de l’état à réinitialiser, des éléments d’interface utilisateur à réinitialiser, etc. Je suppose que vous devez créer votre propre méthode de réinitialisation qui définit toutes les choses à leur état initial ou … vous pouvez choisir le chemin le plus simple et simplement recharger la page.

Merci pour les réponses patientes. Les deux ont raison:

  • dans le cas d’une animation, la méthode stop fonctionne.

  • dans le cas d’animations chaînées multiples – désolé, il n’y a pas de moyen facile. Rechargez si vous voulez une solution courte mais pas si élégante. Pour le faire correctement, apprenez à utiliser javascript pour construire la chaîne logique de fonctions. Vous ne pouvez pas courir longtemps avec juste jQuery.

Je le fais de cette façon: (je ne sais pas si c’est tout à fait juste, cependant)

 $(element).stop(); $(element).clearQueue(); $(element).delay(20).animate({ ... }); 

Essayez .finish() .
Exemple (essayez de spammer le bouton):

 $('button').on('click', function(event) { $("div").finish(); $("div").fadeOut(1000); });