jQuery cacher et afficher


Effets jQuery - Masquer et afficher

Exemple

jQuery hide()
Démonstration simple de la méthode jQuery hide().

jQuery hide()
Une autre instance de hide(). Montre comment masquer du texte.

jQuery hide() et show()

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

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Syntaxe :

$(sélecteur).hide(vitesse, rappel);

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

Le paramètre facultatif de vitesse spécifie la vitesse de hide/showing , qui peut prendre les valeurs suivantes : "lent", "rapide" ou millisecondes.

Le paramètre de rappel facultatif est le nom de la fonction à exécuter une fois le masquage ou l'affichage terminé.

L'exemple suivant illustre la méthode hide() avec le paramètre speed :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
  });
});
</script>
</head>
<body>
<button>隐藏</button>
<p>这是个段落，内容比较少。</p>
<p>这是另外一个小段落</p>
</body>
</html>

Exécution d'une instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

jQuery toggle()

Avec jQuery, vous pouvez utiliser la méthode toggle() pour changer les méthodes hide() et show().

Afficher les éléments masqués et masquer les éléments affichés :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>

<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
</body>
</html>

Exécuter l'instance»

Cliquez le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Syntaxe :

$(sélecteur). speed,callback);

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

Le paramètre de rappel facultatif est le nom de la fonction à exécuter une fois la méthode toggle() terminée.