jQuery / Méthode / .fadeIn() - Faire apparaître progressivement des éléments

Dans jQuery, .fadeIn() révèle les éléments masqués en augmentant progressivement leur opacité. Dans .fadeIn(800), 800 est la durée de l'effet en millisecondes, pas un délai avant son début. Placez le travail dépendant de la fin dans le rappel, et non juste après l'appel.

Durée, easing et fin de l'effet

La documentation de .fadeIn() propose .fadeIn(duration, easing, complete) avec des arguments facultatifs. Une durée numérique plus grande ralentit l'effet. complete est la fonction appelée quand l'effet d'un élément se termine.

easing règle la progression. La valeur par défaut est swing ; linear produit une progression constante. Indiquez-la après la durée, comme .fadeIn(800, "linear"), et non seule à sa place. L'exemple complet utilise le comportement par défaut.

Exemple complet avec deux notifications

Enregistrez tout le code en UTF-8 dans fadein-demo.html et ouvrez-le dans un navigateur. Aucune installation n'est nécessaire, mais internet charge la distribution officielle complète de jQuery par son réseau de diffusion de contenu, ou CDN. La version slim exclut les effets et n'a pas .fadeIn() : utilisez le fichier complet.

Le code utilise 4.0.0. Opacité intermédiaire, durées de 800/200 ms, fin par élément, réinitialisation en cours et affichage instantané ont été exécutés avec 3.7.1 et 4.0.0. L'effet progressif est omis si le système demande un mouvement réduit.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fade in two notice panels</title>
  <style>
    body { font: 16px/1.6 sans-serif; margin: 24px; }
    .panel { display: none; padding: 16px; margin: 12px 0; background: #e4f3f1; }
    button, select { padding: 8px; margin: 4px; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
  <h1>Fade in two notice panels</h1>
  <label for="duration">Duration:</label>
  <select id="duration">
    <option value="800">800 ms</option>
    <option value="200">200 ms</option>
  </select>
  <label><input type="checkbox" id="instant"> Show instantly</label>
  <button type="button" id="show">Show notices</button>
  <button type="button" id="reset">Reset</button>
  <div id="notices">
    <div class="panel" id="one">Notice one</div>
    <div class="panel" id="two">Notice two</div>
  </div>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      const $panels = $("#notices > .panel");
      let completed = 0;
      function report(state) {
        $("#result").text(`state=${state} | completed=${completed}`);
      }
      function clearPanels() {
        $panels.stop(true, false).hide().css("opacity", "");
        completed = 0;
      }
      $("#show").on("click", function () {
        clearPanels();
        const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
        const duration = $("#instant").prop("checked") || reduce
          ? 0 : Number($("#duration").val());
        $("#show").prop("disabled", true);
        report("showing");
        $panels.fadeIn(duration, function () {
          completed++;
          if (completed === $panels.length) {
            report("visible");
            $("#show").prop("disabled", false);
          } else {
            report("showing");
          }
        });
      });
      $("#reset").on("click", function () {
        clearPanels();
        $("#show").prop("disabled", false);
        report("hidden");
      });
      report("hidden");
    });
  </script>
</body>
</html>

Les deux panneaux commencent avec display: none. Le résultat affiche :

state=hidden | completed=0

1. Laissez Show instantly décoché, choisissez 800 ms et appuyez sur Show notices. Les deux panneaux apparaissent ensemble ; le bouton est désactivé pendant l'effet.
2. Une fois terminé, les deux sont visibles et state=visible | completed=2 apparaît. Deux compte les éléments terminés, pas les clics.
3. Après Reset, choisissez 200 ms et recommencez : le même résultat arrive plus vite. Modifier seulement la liste ne change pas l'effet déjà lancé.
4. Appuyez sur Reset pendant les 800 ms. Les panneaux se masquent immédiatement et state=hidden | completed=0 revient. Aucune ancienne fin ne réapparaît après la durée d'origine.
5. Show instantly utilise zéro et affiche sans transition. La détection du mouvement réduit du système produit le même résultat.

Sans fondu visible, vérifiez d'abord cette case et prefers-reduced-motion. L'exemple donne priorité à cette préférence ; même 800 peut donc afficher immédiatement.

Un rappel de fin par élément

.fadeIn() ne bloque pas le JavaScript suivant jusqu'à sa fin. Une annonce de fin sur la ligne suivante peut donc précéder la fin visuelle. L'exemple incrémente completed dans le rappel pour compter les fins réelles.

Chacun des deux panneaux appelle le rappel une fois : ce n'est pas un appel unique pour l'ensemble. L'état visible et la réactivation du bouton attendent completed égal à $panels.length. Cet ensemble reste fixe pendant l'exercice. Dans une fonction ordinaire de rappel, this est l'élément DOM qui vient de terminer.

Interrompre, réinitialiser et dépanner

Dans .stop(true, false), true vide les effets en attente ; false arrête l'effet courant sans le terminer. Son rappel de fin n'est pas exécuté, donc une ancienne fin n'interfère pas après Reset. .hide() masque ensuite, efface une opacité en ligne restée à mi-parcours et remet le compteur à zéro.

Un nouveau lancement effectue le même nettoyage et recommence masqué. Désactiver le bouton empêche l'accumulation de clics et d'effets en attente. Le nettoyage reste local aux panneaux et au compteur, sans changer le réglage global des effets.

En cas d'échec, vérifiez le fichier complet dans Network et les erreurs comme .fadeIn is not a function dans Console. Une sélection vide n'appelle aucun rappel par élément. Vérifiez aussi visibility: hidden, les ancêtres masqués et les règles display prioritaires : modifier l'opacité n'annule pas toutes les causes de masquage.