jQuery / Méthode / .hide() - Masquer les éléments sélectionnés

Dans jQuery, .hide() masque les éléments sélectionnés sans les retirer du modèle objet du document, DOM. Sans argument, le masquage est immédiat ; avec une durée, dimensions et opacité changent avant la disparition. Une fois masqués, display: none retire aussi leur espace dans la mise en page.

Masquage immédiat et effet avec durée

La documentation de .hide() distingue l'appel sans argument des formes animées. .hide() ne dure pas systématiquement 400 millisecondes : sans argument, elle est immédiate. La valeur par défaut de 400 concerne duration dans la forme animée.

L'unité est la milliseconde ; "fast" vaut 200 et "slow" 600. L'effet modifie notamment largeur, hauteur et opacité : les éléments voisins peuvent bouger. Comparez .fadeOut() si une variation surtout d'opacité convient mieux. Choisissez l'effet qui aide à comprendre le changement.

Exemple complet avec deux panneaux

Enregistrez tout le code en UTF-8 dans hide-demo.html et ouvrez-le dans un navigateur. Internet permet de charger le fichier officiel complet de jQuery 4.0.0 depuis le réseau de diffusion de contenu, CDN, sans installation de paquet. La version slim sans effets ne convient pas.

Masquage, saisie conservée, restauration flex, Show/Reset pendant l'effet et réduction des animations ont été exécutés avec 3.7.1 et 4.0.0. Les commandes restent hors des panneaux masqués pour permettre leur restauration.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hide and restore panels</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 24px auto; padding: 16px; }
    button, select, input { font: inherit; margin: 4px; max-width: 100%; }
    .panel { border: 2px solid teal; padding: 16px; margin: 12px 0; }
    #one { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  </style>
</head>
<body>
  <h1>Hide two panels without removing them</h1>
  <label for="duration">Duration:</label>
  <select id="duration"><option value="800">800 ms</option><option value="200">200 ms</option><option value="0">Instant</option></select>
  <button type="button" id="hide">Hide</button>
  <button type="button" id="show">Show</button>
  <button type="button" id="reset">Reset</button>
  <section class="panel" id="one"><label>Note <input value="Keep me"></label><span>First panel</span></section>
  <section class="panel" id="two">Second panel</section>
  <p id="phase">ready</p>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      const $panels = $(".panel");
      let busy = false;
      let completed = 0;
      function report() {
        const visible = $panels.filter(":visible").length;
        $("#result").text(`visible=${visible} | in DOM=${$(".panel").length} | completed=${completed}`);
      }
      $("#hide").on("click", function () {
        if (busy || !$panels.filter(":visible").length) return;
        busy = true;
        completed = 0;
        $("#phase").text("hiding");
        const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
        const duration = reduced ? 0 : Number($("#duration").val());
        $panels.hide(duration, function () {
          completed++;
          if (completed === $panels.length) {
            busy = false;
            $("#phase").text("hidden");
          }
          report();
        });
        report();
      });
      function showPanels() {
        $panels.stop(true, true).show();
        busy = false;
        completed = 0;
        $("#phase").text("ready");
        report();
      }
      $("#show").on("click", showPanels);
      $("#reset").on("click", function () {
        showPanels();
        $("#one input").val("Keep me");
      });
      report();
    });
  </script>
</body>
</html>

Initialement, deux panneaux sont visibles et présents dans le document :

visible=2 | in DOM=2 | completed=0

1. Changez Note en Edited note et gardez Duration sur 800 ms.
2. Hide donne phase hiding tandis que les deux panneaux rétrécissent. À la fin, phase vaut hidden et le résultat visible=0 | in DOM=2 | completed=2.
3. Show les affiche immédiatement avec Edited note conservé et la disposition flex du premier restaurée.
4. Comparez avec 200 ms. Si le système/navigateur demande moins de mouvements, le code utilise zéro au lieu de la durée choisie.
5. Instant masque immédiatement avec toujours deux fins d'effet.
6. Pendant un effet de 800 ms, appuyez sur Show ou Reset. Les deux panneaux reviennent et completed est remis à zéro. Reset remet aussi la saisie à Keep me.

Show réaffiche les mêmes nœuds sans réinitialiser la saisie. Reset la change parce que le code appelle explicitement .val("Keep me"). Conserver un nœud masqué et remettre ses valeurs à zéro sont deux opérations distinctes.

Gérer les rappels et les actions répétées

complete est appelé à la fin de l'effet de chaque élément, pas une seule fois pour toute la sélection. Deux panneaux donnent donc completed=2. La ligne suivante ne patiente pas automatiquement jusqu'à la fin ; reliez les actions dépendantes à la fin réelle.

busy ignore les demandes Hide supplémentaires pendant l'exécution. C'est la stratégie de l'exemple contre l'accumulation de la file, pas une règle propre à .hide(). Si tout est déjà masqué, Hide est aussi ignoré pour ne pas augmenter de nouveau le compteur.

Show et Reset utilisent .stop(true, true) pour vider les effets en attente et terminer immédiatement l'effet courant avant .show(). Les rappels existants peuvent alors s'exécuter immédiatement ; busy, completed et phase sont donc réinitialisés ensuite. Dans les deux versions, une restauration en cours d'effet n'a pas entraîné de changement ultérieur à l'échéance initiale.

Vérifier disposition, accessibilité et restauration

.show() peut restaurer la valeur display antérieure. Cela diffère d'imposer display: block à des éléments flex ou inline. Avec des règles adaptatives ou !important, examinez les styles calculés. Une classe et une règle CSS cohérente peuvent mieux convenir à cette gestion.

display: none exclut le contenu de la disposition et normalement de l'arbre d'accessibilité. Gardez les commandes de restauration hors de la zone masquée. Si une interface cache une zone en cours de saisie, prévoyez aussi où déplacer le focus.

Le contenu reste dans le DOM et la mémoire du client : le masquage ne protège pas les informations secrètes. Vérifiez sélection, jQuery complet, ancêtres masqués, erreurs Console et priorité CSS de display si l'effet échoue. Une sélection vide n'a rien à animer et ne produit aucun rappel de fin.