Hello tout le monde !

Voila j'ai remarqué quelque chose en local :
Je code une nouvelle version de mon portfolio, en y mettant des effets via jquery avec la méthode animate().

J'affiche progressivement un bloc "p" qui lui-même, via css3 se déplace lorsqu'on passe la souris dessus . Ainsi le texte se "déroule" de gauche à droite pour apparaître au chargement de la page, puis lorsqu'on passe la souris dessus, il se décale vers la droite en css3.

La remarque : le fait d'activer cet effet css3 fait bugger l'animate jquery. L'affichage de gauche à droite se saccade à un moment et redevient fluide. ( au même endroit systématiquement)

J'aimerais donc savoir si il est effectivement reconnu que l'utilisation de ces deux techniques combinées est à éviter, où si c'est contournable. Par exemple peut-on "binder" via la méthode jquery .css() le css3 une fois l'animate terminé ? j'ai essayé sans succés.

Donc si vous avez une idée pour arranger ça, avoir une animation fluide au chargement && un décalage via css3 au passage de la souris, j'aimerais bien la connaître

Merci bien d'avance !

Les animations de jQuery ne sont finalement que des suites de changements CSS.
Le problème, c'est qu'une fois que tu as mis un transition en CSS, même les changements dynamiques (via JS) sont effectués avec une transition.

Pourquoi tu n'initialises pas ta largeur à 0 (ou la largeur initiale, quelle qu'elle soit) et tu utilises directement css() pour donner la largeur finale.
Normalement, cette modification devrait utiliser la transition pour se faire.

on peut faire ça ? j'ai vu dernièrement pour mettre un délai a l'animation via css, mais rien ne garantit que l'animation javascript durera exactement la même durée à chaque fois :/

d'ailleurs je sais pas comment on le fait en css Oo je part d'une width de 0px, et il faut que ça en fasse au final 100, en sachant que j'ai d'autres animations javascript avant ( un menu qui descend ).

je vais essayer, par contre faut que je trouve comment on modifie la width via le css en animation. J'ai vu la méthode scale(), on peut l'utiliser que pour la width ou que pour la height ?

Je te propose de simplement remplacer ton animate() actuel par un css() en donnant directement la valeur finale.

Puisque tu as une transition de déclarée dans ton CSS, ce changement de CSS sera affecté par la transition.

oké problème résolu, j'ai un peu modifier le javascript, en faisant faire deux animations en même temps le décalage se compense, je regarderais plus tard si des bugs majeurs gènent mais pour l'instant ça reste raisonnable