jQuery / Método / .fadeOut() - Ocultar elementos gradualmente

No jQuery, .fadeOut() reduz a opacidade e depois aplica display: none. Sumir da tela e do layout não exclui o elemento DOM; ele pode ser mostrado novamente. Para removê-lo, chame .remove() no callback de conclusão, depois de terminar o efeito.

Ocultação, remoção e duração

A documentação de .fadeOut() explica que display: none também elimina o espaço ocupado no layout ao concluir. Durante o efeito, a opacidade diminui; a altura não se recolhe gradualmente. Remover do modelo de objetos do documento, DOM, é outra operação.

.fadeOut(duration, easing, complete) aceita argumentos opcionais. A duração padrão é 400 ms, "fast" vale 200 e "slow" 600. .fadeOut(800) desaparece ao longo de 800 ms, sem esperar antes de começar. easing usa swing por padrão; "linear" após a duração dá progressão constante.

Exemplo completo com entrada editável

Salve todo o código em UTF-8 como fadeout-demo.html e abra no navegador. Não exige instalação, mas é preciso internet para carregar a distribuição oficial completa do jQuery pela rede de distribuição de conteúdo, ou CDN. Slim exclui efeitos: use o arquivo completo.

O código usa 4.0.0. Ocultação, remoção, valores, restauração e reinício durante o efeito foram executados com 3.7.1 e 4.0.0. Os controles ficam fora do aviso, mantendo Restore e Reset disponíveis após o desaparecimento.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fade out versus remove</title>
  <style>
    body { font: 16px/1.6 sans-serif; margin: 24px; }
    #notice { padding: 20px; background: #e5f2f0; margin: 16px 0; }
    button, select, input { padding: 8px; margin: 4px; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
  <h1>Fade out versus remove</h1>
  <label for="duration">Duration:</label>
  <select id="duration"><option value="800">800 ms</option><option value="0">0 ms</option></select>
  <button type="button" id="fade">Fade only</button>
  <button type="button" id="remove">Fade then remove</button>
  <button type="button" id="restore">Restore</button>
  <button type="button" id="reset">Reset</button>
  <div id="host">
    <div id="notice">
      <p>A temporary notice</p>
      <label>Note: <input id="note" value="Keep me"></label>
    </div>
  </div>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      const initialHtml = $("#host").html();
      function enable() {
        $("#fade, #remove").prop("disabled", false);
      }
      function report(state) {
        $("#result").text(`state=${state} | nodes=${$("#notice").length}`);
      }
      function fade(removeAfter) {
        const $notice = $("#notice");
        if (!$notice.length) {
          report("missing");
          return;
        }
        const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
        const duration = reduce ? 0 : Number($("#duration").val());
        $notice.stop(true, false);
        $("#fade, #remove").prop("disabled", true);
        report("fading");
        $notice.fadeOut(duration, function () {
          if (removeAfter) $(this).remove();
          enable();
          report(removeAfter ? "removed" : "hidden");
        });
      }
      $("#fade").on("click", () => fade(false));
      $("#remove").on("click", () => fade(true));
      $("#restore").on("click", function () {
        if (!$("#notice").length) $("#host").html(initialHtml);
        $("#notice").stop(true, false).css("opacity", "").show();
        enable();
        report("visible");
      });
      $("#reset").on("click", function () {
        $("#notice").stop(true, false);
        $("#host").html(initialHtml);
        enable();
        report("visible");
      });
      report("visible");
    });
  </script>
</body>
</html>

A entrada inicial contém Keep me e o resultado mostra:

state=visible | nodes=1

1. Troque Note por edited e use Fade only. Após 800 ms: state=hidden | nodes=1.
2. Restore mostra o mesmo aviso com edited preservado. Ocultar manteve o elemento original.
3. Fade then remove remove após o efeito: state=removed | nodes=0. Esperar antes de .remove() permite observar o fade.
4. Depois de remover, Restore recria o aviso pelo HTML inicial. A entrada volta a Keep me; edited não é recuperado automaticamente.
5. Durante o efeito, Restore interrompe e mostra o existente. Reset interrompe e recria o HTML inicial, restaurando também a entrada.
6. 0 ms executa a mesma conclusão sem transição. Detectar movimento reduzido também usa zero.

Para recuperar alterações reais após remover, guarde os dados separadamente e aplique ao novo elemento. Restore neste exercício mostra o existente ou recria conteúdo inicial fixo; não recupera entradas removidas.

Remover após concluir e tratar alvos ausentes

.remove() exclui elemento, conteúdo e dados/eventos jQuery associados. Não preserva como ocultar. No callback, este exemplo remove this somente se removeAfter for verdadeiro. Na função comum, this é o elemento DOM cujo efeito terminou.

.fadeOut() não bloqueia o JavaScript seguinte. .remove() imediatamente depois excluiria o elemento antes da conclusão. Com vários elementos, o callback executa para cada um; aqui, um ID único limita intencionalmente o alvo.

Uma seleção vazia não tem callback por elemento. O exemplo confere .length e informa state=missing | nodes=0 se já foi removido. Os botões não ficam desativados esperando um alvo inexistente.

Restauração durante o efeito e repetição

.stop(true, false) limpa a fila e interrompe o efeito atual sem concluir nem executar seu callback. Um callback antigo não pode remover o aviso após Restore ou Reset. Restore limpa opacidade intermediária e chama .show(); Reset interrompe antes de substituir o HTML.

Os botões Fade ficam desativados durante o efeito, enquanto Restore e Reset continuam disponíveis. Diferencie conclusão normal de cancelamento para manter contador e tela coerentes.

Se houver problemas, verifique o arquivo completo, .fadeOut is not a function em Console e o escopo do seletor. Sumir imediatamente pode vir de 0 ms ou movimento reduzido. Um elemento já oculto não repete um fade visível: restaure antes de comparar.