Comment créer des animations personnalisées dans jQuery
Les animations ajoutent divers effets d'embellissement pour engager les téléspectateurs. JQuery prend en charge une longue liste de méthodes pour effectuer diverses opérations. La méthode jQuery animate () est utilisée pour créer des animations personnalisées dans jQuery. Les propriétés CSS sont les principales parties prenantes de la méthode jQuery Animate (). Ces propriétés peuvent être animées à différentes vitesses avec différentes valeurs. Ce message vise à fournir des directives détaillées sur les animations à jQuery avec les résultats d'apprentissage suivants
- Mécanisme de travail de la méthode animate ()
- Création d'animations personnalisées (en utilisant des exemples)
Comment animer la méthode () fonctionne dans jQuery
La méthode animate () utilisée pour créer des animations a la syntaxe suivante.
$ (sélecteur).animate (css, speed, rappel);La syntaxe fournie ci-dessus a les instances suivantes
- sélecteur peut être n'importe quel nom d'élément, classe ou identifiant d'un élément
- Le CSS Une partie de la méthode animate () est obligatoire pour les animations et la propriété CSS que vous souhaitez animer CSS partie de la syntaxe
- Le vitesse définit le durée de l'animation et il peut être défini sur «rapide», «lent» ou en millisecondes (valeur numérique)
- Enfin, le rappeler est un paramètre facultatif et est utilisé pour afficher un certain traitement après la réalisation de l'animation
La syntaxe animate () traite la valeur numérique pour modifier le CSS. Par exemple, la propriété BackgroundColor ne peut pas être définie en utilisant le nom de couleur, donc la propriété CSS Color n'est pas incluse dans JQuery Animations. De plus, les noms de propriété doivent être dans un cas de chameau comme BorderColor, BorderWidth, etc.
Comment créer des animations personnalisées dans jQuery
Comme discuté précédemment, la méthode animate () est pratiquée pour créer des animations jQuery. La méthode animée peut être utilisée dans les scénarios suivants
Plusieurs animations à la fois: Toutes les animations spécifiées sont effectuées en un seul coup.
Animer les propriétés CSS une par une: Dans ce cas, la méthode animate () est appliquée de manière séquentielle (l'une après l'autre).
Animation de la valeur relative: Habituellement, les propriétés CSS sont animées en utilisant la valeur actuelle d'une propriété CSS. Cependant, la méthode Animate () permet de réaliser des animations dynamiques en utilisant le phénomène de valeur relative.
Nous pratiquons les façons possibles dans les exemples à venir.
Exemple 1: plusieurs animations à la fois
Presque toutes les propriétés CSS peuvent être animées à l'aide de la méthode Animate (). Cet exemple illustre l'effet d'animation jQuery () en utilisant plusieurs propriétés CSS.
Dans le code ci-dessus,
- Diverses propriétés CSS (largeur, hauteur et taille de police) de l'élément div seront animées
- La vitesse est réglée pour ralentir
Sortir
Avant l'animation
Après l'animation
Exemple 2: l'un après l'autre
L'effet d'animation peut être embelli en animant les propriétés CSS une par une. Jetons un coup d'œil à cette méthode.
Le code ci-dessus pratique l'animation sur un div élément et est expliqué ci-dessous
- le rembourrage, hauteur, largeur et largeur de bordure avec différentes valeurs de vitesse
- Premièrement, le rembourrage sera animé suivi par hauteur, largeur et largeur de bordure
Sortir
Avant l'animation
Après l'animation
Exemple 3: valeurs relatives
Les valeurs relatives sont générées à l'aide de deux opérateurs d'affectation «+ =» et «- =». La valeur actuelle de la propriété CSS est prise en tant que valeurs de référence et de nouvelles valeurs sont générées en ajoutant / soustrayant une valeur numérique de cette valeur actuelle.
Dans le code ci-dessus,
- La largeur et la hauteur du div seront animées
- À chaque clic (dans notre cas), la largeur augmentera de 10px tandis que la hauteur sera diminuée de 5px.
Sortir
Avant l'animation,
Après plusieurs clics,
Exemple 4: Utilisation de valeurs de chaîne
La méthode animate () accepte uniquement trois valeurs de chaîne (cacher, afficher ou basculer) pour les propriétés CSS. La propriété Toggle peut animer la propriété cachée à afficher et vice versa.
Dans le code ci-dessus, le montrer et basculer les opérations sont effectuées sur largeur et hauteur respectivement. Pour cela, nous avons utilisé Button Class = ”basculer”Et class =”montrer" .
Sortir
Avant l'animation,
Après avoir cliqué sur le bouton de basculement, la largeur changera son état (pour cacher tel qu'il est dans le "montrer«État) comme on peut le voir dans l'image suivante.
Si vous cliquez sur le bouton Afficher, il afficherait à nouveau le div.
Les animations ont un rôle clé dans le suivi de tout contenu. En suivant ces exemples, vous auriez appris la création personnalisée d'animations dans jQuerry.
Conclusion
La méthode animate () est utilisée pour créer des animations personnalisées dans jQuery. La méthode animate () peut être appliquée pour animer plusieurs propriétés CSS à la fois ou elle peut également être appliquée de manière séquentielle. Cet article fournit un guide détaillé sur la création d'animations personnalisées dans jQuery. Vous obtiendrez une compréhension de la méthode Animate () (principale partie partielle des animations). De plus, plusieurs exemples sont démontrés qui montrent la création d'animations personnalisées dans jQuery.