Implémentation d'animations avec jQuery

Les effets animés dans jQuery Ce ne sont pas les animations que nous connaissons, c'est-à-dire que nous n'allons pas donner de mouvement à un dessin, il est important de le préciser car cela peut prêter à confusion. Ces effets animés font référence à la manière dont les transitions d'éléments sont générées dans le SOLEIL, un élément pouvant se déplacer lentement depuis un coin du navigateur ou disparaître en se brisant en milliers de morceaux.
À première vue, il peut sembler qu'ils nous soient utiles, à la fin si nous voulons qu'un élément apparaisse ou disparaisse, peu importe comment cela se passe, cependant pour ceux qui étudient le comportement du Les interfaces des utilisateurs Ceci est très important car il peut définir l'humeur de l'utilisateur ou être affiché comme un moyen subtil de rendre le visuel un peu plus attrayant.
Il y a bien sûr ceux qui abusent et exagèrent dans l'utilisation des effets animés et surchargent tellement l'interface qu'elle devient lourde ou peu fiable et fait souffrir l'utilisateur lors de l'utilisation du système, c'est pourquoi il faut avoir un minimum de conscience et modération lors de l'application de ces types d'effets.
Il est important de savoir que les différents types d'animation Ils ont un certain nombre d'options contrôlables à partir de l'appel que nous passons, nous pouvons contrôler sa durée, afin que nous puissions calibrer si l'effet affecte la convivialité ou non et si, en fonction du temps qu'il dure, il peut être détaillé et obtenir l'effet souhaité et nous peut également indiquer la fonction ou la méthode à exécuter dans le rappeler à la fin de l'animation, par exemple si on fait disparaître un bouton alors qu'il n'est plus là, une méthode est exécutée qui envoie alors un message à l'utilisateur.
Une autre option que nous avons est de passer un carte d'objet dans lequel nous définissons les options avancées ou exclusives de l'effet animé que nous utilisons, mais c'est surtout lorsque nous voulons faire quelque chose de très spécifique et avancé. La syntaxe d'utilisation de ces options est la suivante :

 $ (sélecteur) .effect (durée); $ (sélecteur) .effect (durée, fonction CallBack); $ (sélecteur) .effect (functionCallBack); $ (sélecteur) .effect (mapObjects); 

Comme nous voyons que chaque ligne correspond à chacune des variations possibles que nous pouvons appliquer dans les animations standard, il est possible que certaines animations aient une caractéristique particulière, cependant dans celles que nous verrons dans ce tutoriel, nous travaillerons avec cela.
L'un des effets les plus utilisés et les plus utiles auxquels nous pouvons penser est d'afficher et de masquer des éléments et il s'avère également que ce sont des effets assez simples à mettre en œuvre, c'est pourquoi nous allons les utiliser comme exemple.
afficher () et masquer ()Les méthodes qui nous permettent d'atteindre ces objectifs sont Spectacle() Oui cacher (), comme nous voyons leurs noms en anglais correspondent à l'action, show pour le premier et hide pour le second, ceux-ci peuvent être appliqués à n'importe quel élément de notre SOLEIL, ils sont donc assez pratiques et utiles.
Nous allons faire une petite animation dans laquelle nous allons utiliser la durée et l'appel à une fonction rappeler au moment de l'exécuter, nous appliquerons les effets Spectacle() Oui cacher () et ainsi nous pouvons apprendre comment ceux-ci sont utilisés.
Dans le code suivant, nous voyons comment, en premier lieu, nous incluons la bibliothèque jQuery de l'un des CDN adéquate, avec cela nous évitons d'avoir à le stocker localement et ainsi nous profiterons du cache du navigateur.
Ensuite, nous définissons deux blocs nommé objet 1 Oui élément2 respectivement, où le premier est caché et le second visible et enfin nous avons un bouton qui dit démarrer auquel nous appliquons dans son événement click qui exécute la fonction encourager().
La fonction encourager() appliquez d'abord l'animation Spectacle() au objet 1 et lui donne une valeur de 1000 millisecondes qui est égale à 1 seconde et à cela nous ajoutons un rappeler où nous appliquons l'effet cacher () à nôtre élément2 et génère un message par console.
A l'intérieur de l'animation cacher () à quoi appliquons-nous élément2 nous avons créé un rappeler où nous écrirons également un message par console. Voyons donc le code de notre premier exemple :

 Animations
Ceci est notre élément caché initial

Pour lancer l'animation, cliquez sur le bouton
Début 

Voyons maintenant à quoi cela ressemble dans notre navigateur, dans l'image suivante, nous verrons le HTML Avant d'exécuter une action, regardons comment le objet 1 pas montré:

Maintenant, dans l'image suivante, nous verrons ce qui se passe après avoir cliqué sur le bouton Début, nous remarquerons que maintenant nous voyons l'élément caché et dans la console nous aurons deux messages, s'ils font l'exemple en direct, ils verront également comment un élément apparaît en premier et une seconde plus tard, l'autre disparaît :

De manière simple, nous avons donné vie à l'affichage et au masquage des éléments de notre document HTML.
Il y a des moments où nous voulons qu'un bouton fonctionne comme un commutateur, affichant et masquant un élément ou un groupe d'éléments, bien que cela soit facile à faire en évaluant les états et en utilisant les méthodes Spectacle() Oui cacher (), la vérité est que nous générerions trop de code pour quelque chose d'aussi simple, c'est pourquoi l'équipe de jQuery ils y ont pensé et ils nous fournissent la méthode basculer ().
À quoi sert la méthode toggle () ?Ce que fait cette méthode est d'évaluer l'état actuel de l'élément et donc s'il est visible, il le masque et s'il est masqué, il le montre, comme indiqué par le comportement de type commutateur. La meilleure chose est qu'à cette méthode, nous pouvons ajouter les différentes options d'animation, avec la durée et la possibilité de faire le rappeler.
Construisons maintenant un exemple où nous mettons en pratique ce que nous avons appris sur la méthode toggle(), voyons le code ci-dessous :

 Animations
Le résultat de l'exécution de l'effet toggle ().

Début 

Dans le code suivant, nous verrons comment nous avons créé un div appelé objet 1 qui est initialement caché, alors nous avons un bouton Début qui en cliquant appellera la fonction d'animation, il aura la méthode basculer () appliqué à l'élément et dans un premier temps il apparaîtra et affichera un message par console.
Voyons l'état initial de ce code par navigateur, nous remarquerons que nous n'avons que le bouton et qu'il n'y a rien dans la console :

Voyons maintenant comment, en cliquant sur le bouton, l'élément caché apparaît et nous renvoie le message via la console :

Enfin, si nous cliquons à nouveau sur le bouton, l'élément sera masqué et le message sera répété dans la console, ce que nous remarquons lorsque nous voyons le numéro trois à côté, qui indique combien de fois l'événement a été déclenché.

Oui ok Spectacle() Oui cacher () Ils sont efficaces, ils peuvent sembler un peu simples à première vue, c'est pourquoi nous avons d'autres méthodes qui nous aident à faire différentes animations, dans ce cas nous parlons de disparaître Oui glisser qui correspondent au fondu et au glissement, où le premier a un effet semblable à l'apparition et le second glisse d'un bord de l'écran ou du conteneur de l'élément.
Voyons dans la liste suivante ses équivalents à Spectacle() et à cacher ():
fadeIn () et slideIn ()Ils correspondent aux effets de montrer des éléments, c'est-à-dire qu'ils sont équivalents aux Spectacle().
fadeOut et slideOut ()Ils correspondent aux effets de masquage des éléments, c'est-à-dire qu'ils sont équivalents aux cacher ().
fadeToggle () et slideToggle ()Il y a un troisième cas et c'est celui qui correspond aux effets de type switch et ils sont équivalents à basculer ().
À titre d'exercice, nous vous laissons parcourir à nouveau les exemples, mais en utilisant ces nouvelles méthodes afin que vous puissiez voir de première main comment elles fonctionnent.
Avec cela nous terminons ce tutoriel, nous avons appris à animer nos éléments de manière subtile et intelligente, il est important de ne pas abuser de ces effets en plaçant des temps d'animation très longs, car ce que nous allons réaliser est d'ennuyer l'utilisateur et retarder leur travail, en gardant à l'esprit que nous devons avant tout préserver la convivialité.