Ces méthodes portent le nom (en anglais) des effets qu’elles vont permettre de mettre en place, comme la méthode hide() pour cacher un contenu par exemple.
Dans cette leçon, nous allons étudier les méthodes que jQuery met à notre disposition pour créer des effets de fondu et de slide.
Créer des effets de fondu en jQuery
Un “fondu” est une disparition ou apparition progressive d’un élément. C’est donc un effet de transition d’un état à un autre. jQuery nous fournit quatre méthodes pour créer des effets de fondu :
- La méthode
fadeOut(); - La méthode
fadeIn(); - La méthode
fadeTo(); - La méthode
fadeToggle().
Ces méthodes vont en fait jouer sur la valeur de la propriété opacity de l’élément ciblé, en faisant passer cette valeur progressivement de 1 à 0 (totalement opaque à totalement transparent) ou inversement. Dès que l’opacité atteint 0, un display: none est appliqué à l’élément pour le faire disparaitre totalement de la page.
Plus spécifiquement, la méthode fadeOut() va nous permettre de cacher les éléments ciblés en les rendant progressivement transparents tandis que la méthode fadeIn() va produire l’effet contraire c’est-à-dire va afficher progressivement des éléments cachés en les opacifiant progressivement.
La méthode fadeToggle() va elle nous permettre d’inverser l’état de visibilité d’un élément, en faisant apparaitre progressivement un élément caché au départ ou au contraire en faisant progressivement disparaitre un élément opaque au départ avec un effet de fondu.
La méthode fadeTo(), finalement, va elle nous permettre de définir un niveau d’opacité seuil (entre 0 et 1) auquel l’élément devra parvenir progressivement. Si l’élément est plus transparent au départ que ce niveau, il s’opacifiera progressivement et inversement.
On va pouvoir passer jusqu’à trois arguments aux méthodes fadeOut(), fadeIn() et fadeToggle() : la durée de la transition, la fonction d’accélération qui doit être utilisée pour réaliser la transition et une fonction de rappel qui va être exécuté une fois la transition terminée. La méthode fadeTo() va pouvoir supporter jusqu’à 4 arguments en ajoutant le niveau d’opacité en deuxième argument.
Concernant la durée de la transition, on va pouvoir préciser un nombre de millisecondes que doit durer l’effet ou utiliser les mots clefs slow ou fast.
Pour information, slow correspond à 600ms et fast à une durée d’effet de 200ms. La durée par défaut de l’effet est de 400ms.
Concernant la fonction d’accélération qui doit être utilisée pour réaliser l’effet, jQuery ne supporte que swing qui est la valeur par défaut et linear qui va créer une transition régulière.
See the Pen
Cours jQuery 4.1.1 by Pierre (@pierregiraud)
on CodePen.
Créer des effets de slide en jQuery
jQuery nous fournit également des méthodes qui vont nous permettre de créer des effets de slide. Par “slide”, on entend ici le fait qu’un élément se déplie ou se replie progressivement. Cet effet va être intéressant dans la création d’un menu déroulant par exemple.
Pour créer ce genre d’effet, nous allons pouvoir choisir parmi trois méthodes :
- La méthode
slideDown(); - La méthode
slideUp(); - La méthode
slideToggle().
La méthode slideDown() va nous permettre de “déplier” un élément progressivement tandis que la méthode slideUp() va produire l’effet inverse et nous permettre de “replier” un élément progressivement.
La méthode slideToggle() va elle nous permettre de déplier progressivement un élément plié ou au contraire de replier progressivement un élément déplié.
Ces trois méthodes vont accepter jusqu’à trois arguments qui vont être de même type que les précédentes : une durée, une fonction d’accélération et une fonction de rappel qui sera exécutée une fois l’effet terminé.
See the Pen
Cours jQuery 4.1.2 by Pierre (@pierregiraud)
on CodePen.
