Si vous avez essayé jQuery pour la première fois il y a de nombreuses années, cela pourrait être sa capacité à faire de l'animation. C'était peut-être l'un des premiers gros tirages de jQuery. De nos jours, CSS peut également faire de l'animation avec un support de navigateur assez décent et il a tendance à être plus performant, donc moins pertinent. Cependant, si vous avez besoin d'un support de navigateur super profond, jQuery est toujours une option.
Nous avons déjà expliqué comment changer le CSS dans jQuery. Cela ressemble à ceci:
$("#element").css(( "background-color": "red", "left": "20px" ));Au lieu de déplacer instantanément cet élément vers ces valeurs, nous pouvons les animer. Cela ressemble presque exactement au même:
$("#element").animate(( "background-color": "red", "left": "20px" ));Voici le stylo que nous avons créé dans la vidéo:
Voir le Pen e111fbfa7506d19034d977b17e2160a3 par Chris Coyier (@chriscoyier) sur CodePen
Si nous inspectons cet élément dans les outils de développement des navigateurs, nous pouvons voir sous le capot comment jQuery fait cette animation. Essentiellement, il répète rapidement le style en ligne appliqué à ces éléments
Dans cette vidéo, nous explorons du code jQuery écrit par quelqu'un d'autre pour voir à quel point nous pouvons le disséquer.
Voir le Pen jQuery animate height: auto par Josh Parrett (@JTParrett) sur CodePen
Au cours de ce voyage, nous entreprenons un petit voyage secondaire intéressant sur l'animation à des hauteurs automatiques. C'est quelque chose que ni CSS ni JavaScript ne peuvent particulièrement bien faire. Ils préfèrent les chiffres précis. Animer 10px à 200px est logique. Animer 10px à «ce que vous seriez normalement» n'est pas aussi simple.
Dans le code de Josh, nous trouvons une fonction intelligente qui définit essentiellement la hauteur sur auto, la mesure, la remet à ce qu'elle était, puis s'anime à cette valeur nouvellement testée. Jolie astuce! Pour une démo plus robuste qui va et vient et en JavaScript brut, voir ici.
Je ne l'ai remarqué qu'après la fin de la vidéo, mais jQuery nous aide également à le faire. Fichier qui sous raison d'utiliser jQuery # 40985. En utilisant .slideUp/ .slideDown/ .slideToggle- cela fonctionne d'une manière ou d'une autre, même si l'élément est masqué avec display: nonepour commencer.
Voir le Pen jQuery animate height: auto par Chris Coyier (@chriscoyier) sur CodePen
Pour tester notre travail dans l'ancien IE, nous avons utilisé BrowserStack, qui est également intégré à CodePen.