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

En jQuery, .fadeOut() reduce la opacidad y después aplica display: none. Desaparecer de la pantalla y de la distribución no elimina el elemento DOM, por lo que puede mostrarse otra vez. Para eliminarlo, llama a .remove() en la función de finalización, tras acabar el efecto.

Ocultación, eliminación y duración

La documentación de .fadeOut() explica que display: none también elimina el espacio ocupado al terminar. Durante el efecto baja la opacidad; no se contrae gradualmente la altura. Eliminar del modelo de objetos del documento, DOM, es otra operación.

.fadeOut(duration, easing, complete) acepta argumentos opcionales. La duración predeterminada es 400 ms, "fast" vale 200 y "slow" 600. .fadeOut(800) desaparece durante 800 ms, no espera antes de empezar. easing usa swing por defecto; "linear" después de la duración produce avance constante.

Ejemplo completo con entrada editable

Guarda todo el código en UTF-8 como fadeout-demo.html y ábrelo en el navegador. No requiere instalación, pero sí internet para cargar la distribución oficial completa de jQuery desde su red de distribución de contenidos, o CDN. Slim excluye efectos: usa el archivo completo.

El código usa 4.0.0. Ocultación, eliminación, valores, restauración y reinicio durante el efecto se ejecutaron con 3.7.1 y 4.0.0. Los controles quedan fuera del aviso, así Restore y Reset siguen accesibles cuando desaparece.

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

La entrada inicial contiene Keep me y el resultado es:

state=visible | nodes=1

1. Cambia Note por edited y pulsa Fade only. Tras 800 ms: state=hidden | nodes=1.
2. Restore muestra el mismo aviso con edited conservado. Ocultar mantuvo el elemento original.
3. Fade then remove elimina después del efecto: state=removed | nodes=0. Esperar antes de .remove() permite ver el fundido.
4. Tras eliminar, Restore recrea el aviso con HTML inicial. La entrada vuelve a Keep me; edited no se recupera automáticamente.
5. Durante el efecto, Restore lo detiene y muestra el existente. Reset detiene y recrea el HTML inicial, reiniciando también la entrada editada.
6. 0 ms ejecuta la misma finalización sin transición. Detectar movimiento reducido también utiliza cero.

Para recuperar cambios reales tras eliminar, guarda los datos por separado y aplícalos al elemento nuevo. Restore en este ejercicio muestra el existente o recrea contenido inicial fijo; no recupera datos eliminados.

Eliminar al finalizar y tratar objetivos ausentes

.remove() elimina elemento, contenido y datos/eventos jQuery asociados. No conserva como la ocultación. En la función de finalización se elimina this solo si removeAfter es verdadero. En la función normal, this es el elemento DOM cuyo efecto ha terminado.

.fadeOut() no bloquea el JavaScript posterior. .remove() inmediatamente después quitaría el elemento antes de terminar. Con varias coincidencias, la función se ejecuta por elemento; aquí se usa deliberadamente un ID único.

Una selección vacía no tiene finalización por elemento. El ejemplo comprueba .length y muestra state=missing | nodes=0 si ya se eliminó. Los botones no quedan desactivados esperando un objetivo inexistente.

Restauración durante el efecto y repetición

.stop(true, false) vacía la cola y detiene el efecto actual sin completarlo ni ejecutar su finalización. Una función antigua no puede eliminar el aviso tras Restore o Reset. Restore limpia opacidad intermedia y llama a .show(); Reset detiene antes de reemplazar HTML.

Los botones Fade quedan desactivados mientras tanto; Restore y Reset siguen disponibles. Distingue finalización normal y cancelación para mantener contador y pantalla coherentes.

Ante problemas, revisa el archivo completo, .fadeOut is not a function en Console y el ámbito del selector. Desaparecer inmediatamente puede deberse a 0 ms o movimiento reducido. Un elemento ya oculto no repite un fundido visible: restáuralo antes de comparar.