jQuery / Méthode / .fadeOut() - Masquer progressivement des éléments

Dans jQuery, .fadeOut() réduit l'opacité puis applique display: none. Disparaître de l'écran et de la mise en page ne supprime pas l'élément DOM : il peut être affiché de nouveau. Pour le supprimer, appelez .remove() dans le rappel de fin, après l'effet.

Masquage, suppression et durée

La documentation de .fadeOut() précise que display: none retire aussi l'espace de mise en page à la fin. Pendant l'effet, l'opacité baisse ; la hauteur ne se replie pas progressivement. La suppression du modèle objet du document, DOM, est une autre opération.

La forme .fadeOut(duration, easing, complete) accepte des arguments facultatifs. La durée par défaut est 400 ms, "fast" vaut 200 et "slow" 600. .fadeOut(800) s'étale sur 800 ms, sans attendre avant de commencer. easing vaut swing par défaut ; "linear" après la durée donne une progression constante.

Exemple complet avec saisie modifiable

Enregistrez tout le code en UTF-8 dans fadeout-demo.html et ouvrez-le dans un navigateur. Aucune installation n'est nécessaire ; internet charge la distribution officielle complète de jQuery par son réseau de diffusion de contenu, ou CDN. Slim exclut les effets : utilisez le fichier complet.

Le code utilise 4.0.0. Masquage, suppression, valeurs saisies, restauration et réinitialisation en cours ont été exécutés avec 3.7.1 et 4.0.0. Les commandes sont hors de la notification, donc Restore et Reset restent disponibles après sa disparition.

<!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 saisie initiale est Keep me et le résultat indique :

state=visible | nodes=1

1. Remplacez Note par edited, puis appuyez sur Fade only. Après 800 ms : state=hidden | nodes=1.
2. Restore affiche la même notification avec edited conservé. Le masquage a gardé l'élément d'origine.
3. Fade then remove supprime après l'effet : state=removed | nodes=0. Attendre la fin avant .remove() laisse voir le fondu.
4. Après suppression, Restore recrée la notification depuis le HTML initial. Keep me revient ; edited n'est pas récupéré automatiquement.
5. Pendant l'effet, Restore l'arrête et affiche l'élément existant. Reset arrête puis recrée le HTML initial, réinitialisant aussi la saisie.
6. 0 ms exécute la même fin sans transition. Une préférence de mouvement réduit détectée utilise également zéro.

Pour récupérer de vraies modifications après suppression, stockez ces données séparément et appliquez-les au nouvel élément. Restore dans cet exercice affiche l'existant ou recrée un contenu initial fixe ; il ne récupère pas une saisie supprimée.

Supprimer après la fin et gérer une cible absente

.remove() supprime élément, contenu et données/événements jQuery associés. Ce n'est pas une conservation comme le masquage. Le rappel supprime this uniquement si removeAfter est vrai. Dans la fonction ordinaire, this est l'élément DOM dont l'effet vient de finir.

.fadeOut() ne bloque pas le JavaScript suivant. .remove() immédiatement après retirerait l'élément avant la fin. Pour plusieurs éléments, le rappel s'exécute par élément ; ici, un identifiant unique cible volontairement un seul élément.

Une sélection vide n'a pas de rappel par élément. L'exemple vérifie .length avant de commencer et affiche state=missing | nodes=0 après une suppression antérieure. Les boutons ne restent ainsi pas désactivés à attendre une cible inexistante.

Restauration en cours et répétition

.stop(true, false) vide les effets en attente et arrête le courant sans le terminer ni appeler son rappel de fin. Un ancien rappel ne peut donc pas supprimer la notification après Restore ou Reset. Restore efface l'opacité intermédiaire et appelle .show() ; Reset arrête avant de remplacer le HTML.

Les boutons Fade sont désactivés pendant l'effet, mais Restore et Reset restent utilisables. Distinguez fin normale et annulation pour aligner compteurs et état visuel.

En cas de problème, vérifiez le fichier complet, .fadeOut is not a function dans Console et le périmètre de sélection. Une disparition immédiate peut venir de 0 ms ou du mouvement réduit. Un élément déjà masqué n'a pas de fondu visible à répéter : restaurez-le avant de comparer.