Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

AFFICHER OU CACHER DES ELEMENTS HTML EN JQUERY

Créer des effets en jQuery

Le jQuery met à notre disposition une série de méthodes qui vont nous permettre de créer des effets et des animations, souvent en modifiant dynamiquement les styles CSS des éléments HTML ciblés.

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.

Afficher ou cacher un contenu 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.

Pour information, sachez que ces deux méthodes vont jouer sur l’état de la propriété CSS display de l’élément HTML qui sera ciblé.

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.

Première utilisation des méthodes jQuery show() et hide()

On affiche notre titre avec la méthode jQuery show()

On cache notre titre avec la méthode jQuery hide()

Essayer ce code

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

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

La première option 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, normal ou fast. Pour information, slow correspond à 600ms, normal à 400ms et fast à une durée d'effet de 200ms.

Ensuite, on va également pouvoir passer une fonction de rappel (« callback function ») en dernier argument de nos méthodes show() et hide().

Une fonction de rappel est une fonction qui ne va s’exécuter qu’une fois l’effet terminé.

Voyons un exemple ensemble utilisant ces deux options.

Utilisation avancée des méthodes jQuery show() et hide()

Utilisation d'une fonction de rappel avec la méthode jQuery hide()

Essayer ce code

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 caché » au sein de l’élément span créé.

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().

Utilisation de la méthode jQuery toggle()

Essayer ce code

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.

Chapitre précédent

Chapitre suivant