[résolu] problème avec animations séquentielles

problème avec animations séquentielles [résolu] - Javascript/Node.js - Programmation

Marsh Posté le 26-09-2018 à 15:52:14    

Bonjour,
 
ca fait quelques jours que je bloque sur une animation en Jquery3 et avec Velocity:
 
Le but est d'afficher des phylactères de BD avec du texte:  
faire appaitre une première bulle (en fade) avec un texte (aussi en fadeIn),  puis faire disparaitre cette bulle en fade et la faire réappaitre avec autre texte.
 
Ca a l'air simple dis comme ca mais en pratique pas tellement   :whistle: (ou alors c'est moi qui ait pas bien compris certains principes propres à javascript  :D )
 
Premier essai, ca marche plus ou moins sauf que le 2eme texte apparait bien mais pas le premier (alors que les textes apparaissent bien et dans le bon ordre dans la console).
J'imagine donc que le premier texte apparait de manière asynchrone.
2eme essai avec des promises mais même problème.
3 eme essai avec une fonction de queuing chopée sur le net et adaptée mais le problème reste entier.
 
UPDATE: voici un code qui marche
 
voici le code  attention les yeux (c'est pas très propre, mais tant pis)
 

Code :
  1. export const animeAstronaut = $ => {
  2.   $(".intro__bubble-small" ).fadeIn(500, function() {
  3.     $(".intro__bubble-medium" ).fadeIn(500, function() {
  4.       $(".intro__text2" )
  5.         .addClass("introFirstText" )
  6.         .html("<p>First text</p>" )
  7.         .fadeIn(1000)
  8.         .fadeOut(1000, function() {
  9.           $(this)
  10.             .removeClass("introFirstText" )
  11.             .addClass("introSecondText" )
  12.             .html(
  13.               "<p>2eme texte</strong></p>"
  14.             );
  15.         })
  16.         .fadeIn(1000);
  17.     });
  18.   });
  19. };


Message édité par tompouss le 07-12-2018 à 09:13:25

---------------
collectionneur de pâtes thermiques
Reply

Marsh Posté le 26-09-2018 à 15:52:14   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed