jQuery: Afficher et Masquer Éléments

Dans ce didacticiel, j'aimerais vous montrer comment faire disparaître un élément HTML visible ou rendre un élément invisible à nouveau visible à l'aide de JavaScript et de jQuery.

De plus, à la fin de ce tutoriel, nous examinons comment vous pouvez facilement basculer entre la visibilité et l'invisibilité d'un élément à l'aide de la fonction toggle.

• Afficher des Éléments
• Masquer des Éléments
• Toggle - Afficher et masquer des Élément en alternance
• Influencer la Durée de la Surimprision ou de la Dissimulation

Afficher des Éléments

Comme point de départ, nous avons le conteneur DIV invisible suivant.

<div id="d" style="display:none">Invisible</div>

Nous aimerions afficher cette boîte maintenant. Pour rendre un élément HTML visible, jQuery fournit la fonction .show(), que nous appelons maintenant simplement avec l'ID de la boîte DIV.

$("#d").show();

Avec un # précédent, nous pouvons référer aux éléments via leurs IDs, avec un point précédent . nous pouvons aborder plusieurs éléments en utilisant leurs noms de classe.

Masquer des Éléments

Semblable à la fonction .show(), jQuery fournit la fonction .hide() pour masquer des éléments.

$("#d").hide();

Sinon, cette fonction fonctionne de la même manière comme .show().

Toggle - Afficher et masquer des Élément en alternance

Parfois, nous avons la situation où nous voulons rendre un élément visible ou invisible alternativement, selon l'état dans lequel l'élément se trouve actuellement. Mais nous n'avons pas besoin d'écrire une fonction élaborée avec .show() et .hide() car jQuery donne utilisez la fonction .toggle().

$("#d").toggle();

Avec .toggle(), la boîte DIV avec l'ID "d" sera affichée ici si elle est actuellement invisible ou masquée si elle est actuellement visible.

Influencer la Durée de la Surimprision ou de la Dissimulation

Si la décoloration des éléments est trop rapide ou trop lente pour nous, nous pouvons passer une valeur temps en millisecondes aux fonctions .show(), .hide() et .toggle() en tant que paramètre qui indique combien de temps la fonction devrait prendre.

La valeur par défaut est 400 ms. Si cela doit prendre deux fois plus de temps, nous pouvons écrire .show(800), par exemple. En plus de toute valeur numérique, nous pouvons également passer l'une des chaînes "slow" ou "fast" à la fonction qui représente 600 ou 200 ms.