jQuery / Méthode / .fadeToggle() - Inverser la visibilité de chaque élément

Dans jQuery, .fadeToggle() masque progressivement les éléments visibles et révèle les éléments masqués. Avec plusieurs éléments, chacun inverse son propre état ; l'ensemble ne devient pas uniformément visible ou masqué. Utilisez .fadeIn() pour afficher et .fadeOut() pour masquer dans une direction déterminée.

Inversion par élément et arguments

La documentation de .fadeToggle() donne .fadeToggle(duration, easing, complete) avec des arguments facultatifs. duration est le temps d'exécution : 400 ms par défaut, 200 pour "fast", 600 pour "slow". Une valeur plus grande ralentit l'effet, sans attendre avant son début.

easing vaut swing par défaut. Pour une progression constante, indiquez linear après la durée, comme .fadeToggle(800, "linear"), et non seul à sa place. complete s'exécute à la fin de l'effet de chaque élément, dans les deux directions.

À la différence de .fadeIn() et .fadeOut(), deux inversions terminées rétablissent l'état initial. Le masquage finit en display: none et retire l'espace occupé sans supprimer l'élément DOM.

Exemple complet avec états initiaux opposés

Enregistrez tout le code en UTF-8 dans fadetoggle-demo.html et ouvrez-le dans un navigateur. Aucune installation n'est nécessaire ; internet charge le fichier officiel complet jQuery par son réseau de diffusion de contenu, ou CDN. Slim exclut les effets et ne convient pas.

Le code utilise 4.0.0. Inversion, progression linéaire, fins par élément, limitation des entrées répétées et nouvel essai après Reset ont été vérifiés avec 3.7.1 et 4.0.0. one est initialement visible, CSS masque two. Les commandes restent à l'extérieur.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Toggle each tile's visibility</title>
  <style>
    body { font: 16px/1.6 sans-serif; margin: 24px; }
    .tile { padding: 20px; margin: 12px 0; background: #e4f2ef; }
    #two { display: none; }
    button, select { padding: 8px; margin: 4px; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
  <h1>Toggle each tile's visibility</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"> Toggle instantly</label>
  <button type="button" id="toggle" aria-controls="one two">Toggle both</button>
  <button type="button" id="reset">Reset</button>
  <div id="tiles">
    <div class="tile" id="one">Tile one starts visible</div>
    <div class="tile" id="two">Tile two starts hidden</div>
  </div>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      const $tiles = $("#tiles > .tile");
      let busy = false;
      let completed = 0;
      function report() {
        const ids = $tiles.filter(":visible").map((_, tile) => tile.id).get().join(", ");
        $("#result").text(`visible=${ids || "none"} | completed=${completed}`);
      }
      $("#toggle").on("click", function () {
        if (busy || !$tiles.length) return;
        busy = true;
        completed = 0;
        const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
        const duration = $("#instant").prop("checked") || reduce
          ? 0 : Number($("#duration").val());
        $("#result").text("animating | completed=0");
        $tiles.fadeToggle(duration, "linear", function () {
          completed++;
          if (completed === $tiles.length) {
            busy = false;
            report();
          }
        });
      });
      $("#reset").on("click", function () {
        $tiles.stop(true, true).hide().css("opacity", "");
        $("#one").show();
        busy = false;
        completed = 0;
        report();
      });
      report();
    });
  </script>
</body>
</html>

Au départ, seul one est visible :

visible=one | completed=0

1. Laissez Toggle instantly décoché, choisissez 800 ms et appuyez sur Toggle both. one disparaît et two apparaît ; animating indique la transition.
2. À la fin des deux, le résultat est visible=two | completed=2. completed compte les éléments terminés, pas les clics.
3. Une autre inversion terminée donne visible=one | completed=2. Chaque activation acceptée remet d'abord le compteur à zéro.
4. 200 ms produit la même inversion plus vite. Les clics supplémentaires pendant l'effet sont ignorés par le test busy de cet exemple.
5. Reset en cours rétablit one visible, two masqué et completed=0. Vérifiez aussi que le prochain Toggle both révèle two.
6. Toggle instantly ou une préférence de mouvement réduit utilise zéro. Le bouton natif accepte aussi Entrée après prise de focus.

Fin des effets et politique de clics répétés

.fadeToggle() ne bloque pas le JavaScript suivant jusqu'à sa fin. Le rappel s'exécute par élément ; l'exemple n'affiche les identifiants visibles que lorsque completed atteint $tiles.length. Terminer un masquage compte aussi comme une fin normale.

busy est un indicateur créé par l'exercice, pas un argument jQuery. Il devient vrai au début et faux après les deux fins. Cette conception ignore les entrées supplémentaires au lieu d'inverser immédiatement à mi-effet. Distinguez-la d'une file accumulant toutes les demandes.

Si un bouton Ouvrir doit toujours ouvrir, choisissez explicitement l'affichage. Pour uniformiser des panneaux d'états différents, utilisez aussi .fadeIn() ou .fadeOut() plutôt qu'une inversion.

Ordre de réinitialisation et dépannage

Dans le .stop(true, true) de Reset, le premier true vide la file et le second termine immédiatement l'effet courant. Les rappels de fin peuvent alors s'exécuter. Ensuite seulement, l'exemple masque les deux, montre one, réinitialise busy et completed et affiche l'état final. Cet ordre empêche une ancienne fin d'écraser les valeurs rétablies.

Les effets de bascule suivent leur état en cours. Un arrêt à mi-chemin suivi d'un CSS ressemblant à l'état initial ne suffit pas sans vérifier l'essai suivant. Ici, l'effet courant est terminé, la visibilité connue est rétablie explicitement et Reset ainsi que l'inversion suivante sont vérifiés.

Si le résultat paraît inversé, inspectez le CSS initial et display actuel. Sans mouvement, vérifiez mode instantané et préférence réduite ; en cas d'erreur de méthode, vérifiez le fichier complet et Console. Un ensemble vide n'a pas de rappel par élément : .length est testé avant de commencer.