jQuery / Método / .hide() - Ocultar elementos seleccionados

En jQuery, .hide() oculta los elementos seleccionados sin retirarlos del modelo de objetos del documento, DOM. Sin argumentos actúa al instante; con duración cambia dimensiones y opacidad antes de ocultar. Al terminar, display: none también elimina el espacio ocupado en la distribución.

Ocultación inmediata frente a efecto con duración

La documentación de .hide() distingue la llamada sin argumentos de las formas animadas. .hide() no tarda siempre 400 milisegundos: sin argumentos es inmediato. El valor predeterminado de 400 pertenece a duration de la forma animada.

La unidad es el milisegundo; "fast" son 200 y "slow" 600. El efecto cambia anchura, altura, opacidad y otras propiedades, por lo que el contenido cercano puede moverse. Compara .fadeOut() si conviene centrarse en la opacidad. Elige el cambio que facilite entender el comportamiento.

Ejemplo completo con dos paneles

Guarda todo el código en UTF-8 como hide-demo.html y ábrelo en el navegador. Necesitas internet para cargar el archivo oficial completo de jQuery 4.0.0 desde su red de distribución de contenidos, CDN; no se instalan paquetes. No uses la versión slim sin efectos.

Ocultación, entrada conservada, restauración flex, Show/Reset durante el efecto y movimiento reducido se ejecutaron con 3.7.1 y 4.0.0. Los controles quedan fuera de los paneles ocultos para que puedan restaurarse.

<!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>

Al principio hay dos paneles visibles y presentes en el documento:

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

1. Cambia Note a Edited note y deja Duration en 800 ms.
2. Hide muestra phase hiding mientras ambos se encogen. Al terminar, phase es hidden y el resultado visible=0 | in DOM=2 | completed=2.
3. Show los muestra inmediatamente conservando Edited note y restaurando flex del primero.
4. Compara con 200 ms. Si el sistema/navegador solicita movimiento reducido, se usa cero en lugar del tiempo elegido.
5. Instant oculta al instante y completa dos veces igualmente.
6. Durante un efecto de 800 ms pulsa Show o Reset. Ambos vuelven y completed pasa a cero. Reset también devuelve la entrada a Keep me.

Show muestra los mismos nodos y no reinicia la entrada editada. Reset la cambia por la llamada explícita .val("Keep me"). Conservar un nodo oculto y restablecer valores son operaciones distintas.

Gestionar finalización y solicitudes repetidas

complete se ejecuta al terminar cada elemento, no una sola vez por toda la selección. Dos paneles dan completed=2. La siguiente línea de código no espera automáticamente a la animación; conecta el trabajo dependiente con la finalización real.

busy ignora nuevas solicitudes Hide durante la ejecución. Es la estrategia del ejemplo para evitar acumular cola, no una regla incorporada en .hide(). También ignora Hide si ya está todo oculto para no aumentar de nuevo el contador.

Show y Reset usan .stop(true, true) para vaciar efectos pendientes y completar el actual inmediatamente antes de .show(). Los callbacks existentes pueden ejecutarse al instante, por eso busy, completed y phase se reinician después. En ambas versiones, restaurar durante el efecto no causó cambios posteriores al vencer el tiempo original.

Revisar espacio, accesibilidad y restauración

.show() puede recuperar el display anterior. No equivale a forzar display: block sobre elementos flex o inline. Con CSS adaptable o !important, revisa estilos calculados. Una clase con una regla CSS coherente puede resultar más adecuada para gestionar la visibilidad.

display: none retira el contenido de la distribución y normalmente del árbol de accesibilidad. Mantén el control de restauración fuera del área oculta. Si una interfaz oculta una zona en la que se escribe, decide también adónde mover el foco.

El contenido permanece en DOM y memoria del cliente; ocultarlo no protege secretos. Si falla, revisa selección, jQuery completo, ancestros ocultos, errores Console y prioridad CSS de display. Una selección vacía no tiene elementos que animar y no produce callback de finalización.