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

No jQuery, .hide() oculta elementos selecionados sem removê-los do modelo de objetos do documento, DOM. Sem argumento é imediato; com duração altera dimensões e opacidade antes de ocultar. Ao terminar, display: none também retira o espaço ocupado no layout.

Ocultação imediata e efeito com duração

A documentação de .hide() diferencia a chamada sem argumento das formas animadas. .hide() não leva sempre 400 milissegundos: sem argumento é imediato. O padrão de 400 pertence a duration da forma animada.

A unidade é milissegundo; "fast" vale 200 e "slow" 600. O efeito muda largura, altura, opacidade e outras propriedades, podendo mover o layout ao redor. Compare .fadeOut() se uma mudança centrada em opacidade for mais adequada. Escolha o efeito que ajuda a entender a mudança.

Exemplo completo com dois painéis

Salve o código inteiro em UTF-8 como hide-demo.html e abra no navegador. É preciso internet para carregar o arquivo oficial completo do jQuery 4.0.0 pela rede de distribuição de conteúdo, CDN; não se instalam pacotes. Não use a versão slim sem efeitos.

Ocultação, entrada preservada, restauração flex, Show/Reset durante o efeito e movimento reduzido foram executados com 3.7.1 e 4.0.0. Os controles ficam fora dos painéis ocultos para permitir restaurá-los.

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

Inicialmente há dois painéis visíveis e presentes no documento:

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

1. Altere Note para Edited note e mantenha Duration em 800 ms.
2. Hide mostra phase hiding enquanto os dois encolhem. Ao terminar, phase é hidden e o resultado visible=0 | in DOM=2 | completed=2.
3. Show mostra ambos imediatamente, mantendo Edited note e restaurando o flex do primeiro.
4. Compare com 200 ms. Se o sistema/navegador pedir movimento reduzido, o código usa zero em vez do tempo escolhido.
5. Instant oculta na hora e também registra duas conclusões.
6. Durante um efeito de 800 ms, pressione Show ou Reset. Os dois voltam e completed é zerado. Reset também retorna a entrada a Keep me.

Show exibe os mesmos nós e não reinicia a entrada editada. Reset muda o valor por chamar explicitamente .val("Keep me"). Manter um nó oculto e restaurar seus valores são operações distintas.

Gerenciar conclusão e entradas repetidas

complete é chamado quando termina cada elemento, não uma só vez para toda a seleção. Dois painéis dão completed=2. A próxima linha não espera automaticamente a animação: conecte o trabalho dependente à conclusão real.

busy ignora novos pedidos Hide durante a execução. Essa é a estratégia do exemplo contra acúmulo de fila, não uma regra embutida em .hide(). Se tudo já estiver oculto, Hide também é ignorado para não aumentar novamente o contador.

Show e Reset usam .stop(true, true) para limpar efeitos pendentes e concluir o atual imediatamente antes de .show(). Os callbacks existentes podem rodar na hora; por isso busy, completed e phase são reiniciados depois. Nas duas versões, restaurar durante o efeito não causou alterações posteriores ao término do prazo original.

Conferir layout, acessibilidade e restauração

.show() pode restaurar o display anterior. Isso difere de forçar display: block sobre elementos flex ou inline. Com regras responsivas ou !important, confira estilos calculados. Uma classe e uma regra CSS consistente podem ser mais adequadas para essa gestão.

display: none remove o conteúdo do layout e normalmente da árvore de acessibilidade. Deixe o controle de restauração fora da área oculta. Se uma interface esconder a região onde alguém está digitando, planeje também o destino do foco.

O conteúdo fica no DOM e na memória do cliente, portanto ocultar não protege informações secretas. Se o efeito falhar, confira seleção, jQuery completo, ancestrais ocultos, erros no Console e prioridade CSS de display. Seleção vazia não tem elemento para animar e não gera callback de conclusão.