Afficher ou cacher des éléments HTML avec jQuery

Dans cette leçon, nous allons étudier deux méthodes qui von soit simplement nous permettre d’afficher ou de cacher instantanément un élément, soit de l’afficher ou de le cacher progressivement en cumulant des effets de slide et de fondu.

 

Afficher ou cacher un contenu instantanément avec show() et hide()

Les méthodes show() et hide() vont respectivement nous permettre d’afficher un contenu HTML caché ou de cacher un contenu HTML visible.

On va déjà pouvoir utiliser les méthodes show() et hide() sans argument, pour afficher ou cacher un élément instantanément très simplement.

Dans cette première utilisation qui est la plus basique les deux méthodes show() et hide() vont se contenter de jouer sur l’état de la propriété CSS display de l’élément HTML ciblé.

See the Pen
Cours jQuery 4.2.1
by Pierre (@pierregiraud)
on CodePen.

Ici, on applique nos méthodes show() et hide() sur notre titre h1 afin de le cacher ou de l’afficher à nouveau dès qu’un utilisateur clique sur le bouton correspondant, tout simplement.

 

Afficher ou cacher un contenu progressivement avec show() et hide()

On va ensuite pouvoir passer trois arguments à nos méthodes show() et hide() (ainsi qu’à nos autres méthodes permettant de créer des effets).

Le premier argument va correspondre à la durée de l’animation. On va pouvoir préciser une durée soit sous forme d’un nombre correspondant au nombre de millisecondes que doit durer l’effet, soit en utilisant 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.

Le deuxième argument va correspondre à une fonction d’accélération. Le rôle d’une fonction d’accélération est de définir la vitesse de l’animation à différents moments de celle-ci. La fonction d’accélération par défaut est swing, mais on va également pouvoir passer la valeur linear afin que notre effet progresse à vitesse constante (de manière linéaire).

Enfin, le troisième argument va être une fonction de rappel qui ne sera exécuté qu’une fois l’effet terminé.

Lorsqu’on utilise tous ces arguments, hide() et show() deviennent de véritables méthodes d’animation et vont alors modifier progressivement les valeurs des propriétés width, height et opacity en même temps pour l’élément ciblé.

Dans cette utilisation, les méthodes hide() et show() cumulent donc les effets de fondu et de slide.

Dès que les valeurs pour ces trois propriétés arrivent à 0, la propriété display reçoit la valeur none.

See the Pen
Cours jQuery 4.2.2
by Pierre (@pierregiraud)
on CodePen.

Dans ce nouvel exemple, on passe une durée et une fonction de rappel en arguments de notre méthode hide().

Dès que l’utilisateur clique sur le bouton, l’effet se déclenche et va durer 5000ms (5 secondes) jusqu’à ce que le titre h1 soit totalement caché.

Une fois l’effet terminé (donc après les 5 secondes), notre fonction de rappel s’exécute. Celle-ci se contente d’afficher le message « titre bien caché » dans une boite d’alerte.

Ici, j’ai volontairement mis une durée très longue pour l’exécution de notre effet afin que vous puissiez bien constater que la fonction de rappel ne s’exécute qu’une fois l’effet terminé.

 

Inverser l’état de visibilité d’un élément avec toggle()

La méthode toggle() va nous permettre d’inverser l’état de visibilité d’un élément HTML, c’est à dire de l’afficher si il est caché ou de le cacher si il est affiché.

Cette nouvelle méthode va pouvoir s’utiliser exactement comme les précédentes, soit sans argument soit avec les mêmes types d’arguments que show() et hide().

See the Pen
Cours jQuery 4.2.3
by Pierre (@pierregiraud)
on CodePen.

Cette méthode va être particulièrement utile pour laisser la possibilité à nos visiteurs d’afficher ou de masquer certains éléments de notre site selon la situation, comme un sommaire par exemple.

Laisser un commentaire

© Pierre Giraud - Toute reproduction interdite - Mentions légales