Effets jQuery - Cacher et montrer


Masquer, Afficher, Basculer, Glisser, Fondre et Animer. WOW!

Cliquez pour afficher/masquer le panneau

Parce que le temps est précieux, nous offrons un apprentissage rapide et facile.

Chez W3Schools, vous pouvez étudier tout ce dont vous avez besoin pour apprendre, dans un format accessible et pratique.


Exemples


Démontre une simple méthode jQuery hide().


Une autre démonstration de hide(). Comment masquer des parties de texte.


jQuery hide() et show()

Avec jQuery, vous pouvez masquer et afficher des éléments HTML avec les méthodes hide()et :show()

Exemple

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

Syntaxe:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

Le paramètre optionnel speed spécifie la vitesse de masquage/affichage, et peut prendre les valeurs suivantes : "slow", "fast", ou millisecondes.

Le paramètre de rappel facultatif est une fonction à exécuter après la fin de la méthode hide()ou show()(vous en apprendrez plus sur les fonctions de rappel dans un chapitre ultérieur).

L'exemple suivant illustre le paramètre speed avec hide():

Exemple

$("button").click(function(){
  $("p").hide(1000);
});


jQuery bascule()

Vous pouvez également basculer entre le masquage et l'affichage d'un élément avec la toggle()méthode.

Les éléments affichés sont masqués et les éléments masqués sont affichés :

Exemple

$("button").click(function(){
  $("p").toggle();
});

Syntaxe:

$(selector).toggle(speed,callback);

Le paramètre optionnel speed peut prendre les valeurs suivantes : "slow", "fast", ou millisecondes.

Le paramètre de rappel facultatif est une fonction à exécuter après toggle()la fin.


Exercices jQuery

Testez-vous avec des exercices

Exercer:

Utilisez une méthode jQuery pour masquer un élément <p> lorsqu'il est cliqué dessus.

$("p").click(function(){
  $(this).();
});


Référence des effets jQuery

Pour un aperçu complet de tous les effets jQuery, veuillez consulter notre Référence des effets jQuery .