jQuery / Método / .fadeToggle() - Inverter a visibilidade de cada elemento

No jQuery, .fadeToggle() oculta gradualmente os elementos visíveis e mostra os ocultos. Com vários elementos, cada um inverte seu estado; o conjunto não fica uniformemente visível ou oculto. Use .fadeIn() para sempre mostrar e .fadeOut() para sempre ocultar.

Inversão por elemento e argumentos

A documentação de .fadeToggle() apresenta .fadeToggle(duration, easing, complete) com argumentos opcionais. duration é o tempo de execução: 400 ms por padrão, 200 para "fast" e 600 para "slow". Números maiores tornam o efeito mais lento, sem esperar antes de iniciar.

easing usa swing por padrão. Para progressão constante, informe linear após a duração, como .fadeToggle(800, "linear"), não sozinho no lugar dela. complete executa ao terminar o efeito de cada elemento, em qualquer direção.

Diferentemente de .fadeIn() e .fadeOut(), duas inversões concluídas retornam ao estado inicial. Ocultar termina em display: none, retirando o espaço do layout sem excluir o elemento DOM.

Exemplo completo com estados opostos

Salve todo o código em UTF-8 como fadetoggle-demo.html e abra no navegador. Não precisa instalar nada, mas é necessário internet para carregar o arquivo oficial completo do jQuery pela rede de distribuição de conteúdo, ou CDN. Slim exclui efeitos e não atende ao exemplo.

Usa 4.0.0. Inversão, progresso linear, contagem de conclusões, entradas repetidas e nova execução após Reset foram verificados com 3.7.1 e 4.0.0. one começa visível e CSS oculta two. Os controles ficam fora.

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

Inicialmente, apenas one aparece:

visible=one | completed=0

1. Deixe Toggle instantly desmarcado, escolha 800 ms e use Toggle both. one desaparece e two aparece; animating indica a transição.
2. Ao concluir ambos, aparece visible=two | completed=2. completed conta elementos concluídos, não cliques.
3. Outra inversão concluída retorna visible=one | completed=2. Cada acionamento aceito zera primeiro o contador.
4. 200 ms faz a mesma inversão mais rápido. Cliques durante o efeito são ignorados pela verificação busy deste exemplo.
5. Reset durante a execução restaura one visível, two oculto e completed=0. Confira que o próximo Toggle both mostra two.
6. Toggle instantly ou a preferência por movimento reduzido usa zero. O botão nativo também responde a Enter quando recebe foco.

Conclusão e política de entradas repetidas

.fadeToggle() não bloqueia o JavaScript seguinte até concluir. Seu callback executa por elemento; os IDs visíveis só aparecem quando completed alcança $tiles.length. Terminar de ocultar também conta como conclusão normal.

busy é uma variável criada para o exercício, não um argumento jQuery. Fica verdadeira ao iniciar e falsa após concluir ambos. Esse projeto ignora entradas adicionais em vez de inverter imediatamente no meio do efeito. É diferente de acumular todas as solicitações em uma fila.

Se um botão Abrir deve sempre abrir, escolha explicitamente mostrar. Para igualar painéis com visibilidades diferentes, use .fadeIn() ou .fadeOut() em vez de inverter.

Ordem de restauração e solução de problemas

Em .stop(true, true) de Reset, o primeiro true limpa a fila e o segundo conclui imediatamente o efeito atual. Callbacks de conclusão podem executar nesse momento. Só depois o exemplo oculta ambos, mostra one, reinicia busy e completed e informa o estado final. A ordem impede uma conclusão antiga de sobrescrever o restaurado.

Efeitos de alternância acompanham seu estado em andamento. Parar no meio e mudar CSS para parecer inicial não basta sem verificar a execução seguinte. Aqui, o efeito atual é concluído, a visibilidade conhecida é restaurada e Reset e a próxima inversão são verificados.

Se parecer invertido, examine CSS inicial e display atual. Sem movimento, confira modo instantâneo e movimento reduzido; com erro de método, arquivo completo e Console. Um conjunto vazio não tem callback por elemento, então .length é verificado ao iniciar.