jQuery / Método / .fadeIn() - Mostrar elementos gradualmente

No jQuery, .fadeIn() mostra elementos ocultos aumentando gradualmente sua opacidade. Em .fadeIn(800), 800 é a duração do efeito em milissegundos, não uma espera antes de começar. Coloque tarefas dependentes da conclusão no callback, e não logo após a chamada.

Duração, easing e conclusão

A documentação de .fadeIn() inclui .fadeIn(duration, easing, complete) com argumentos opcionais. Uma duração numérica maior torna o efeito mais lento. complete é a função chamada quando o efeito de um elemento termina.

easing controla a progressão. O padrão é swing; linear avança de forma constante. Indique depois da duração, como .fadeIn(800, "linear"), e não sozinho no lugar dela. O exemplo completo usa o comportamento padrão.

Exemplo completo com dois avisos

Salve todo o código em UTF-8 como fadein-demo.html e abra no navegador. Não precisa instalar nada, mas é necessário internet para carregar a distribuição oficial completa do jQuery pela rede de distribuição de conteúdo, ou CDN. A versão slim exclui efeitos e não possui .fadeIn(): use o arquivo completo.

O código usa 4.0.0. Opacidade intermediária, 800/200 ms, conclusão por elemento, restauração durante o efeito e exibição instantânea foram executadas com 3.7.1 e 4.0.0. A transição é omitida quando o sistema solicita movimento reduzido.

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

Os dois painéis começam com display: none e o resultado mostra:

state=hidden | completed=0

1. Deixe Show instantly desmarcado, escolha 800 ms e use Show notices. Os painéis aparecem juntos e o botão fica desativado durante a animação.
2. Ao concluir, os dois estão visíveis e aparece state=visible | completed=2. Dois conta elementos concluídos, não cliques.
3. Após Reset, escolha 200 ms e repita para chegar ao mesmo resultado mais rápido. Alterar a lista não modifica um efeito já em andamento.
4. Use Reset durante os 800 ms: os painéis somem imediatamente e retorna state=hidden | completed=0. A conclusão antiga não reaparece após sua duração original.
5. Show instantly usa zero e mostra sem transição. Detectar movimento reduzido do sistema produz o mesmo resultado.

Se não houver fade visível, confira primeiro a opção instantânea e prefers-reduced-motion. O exemplo prioriza essa preferência, então até 800 pode resultar em exibição imediata.

O callback de conclusão executa por elemento

.fadeIn() não bloqueia o JavaScript seguinte até terminar. Informar conclusão na próxima linha pode fazê-lo durante o efeito. O exemplo incrementa completed dentro do callback para contar conclusões reais.

Cada painel chama o callback uma vez; não é uma única chamada para todo o conjunto. Somente quando completed alcança $panels.length aparece visible e o botão é reativado. O conjunto permanece fixo no exercício. Em uma função comum de callback, this é o elemento DOM que acabou de concluir.

Interromper, restaurar e solucionar problemas

Em .stop(true, false), true limpa os efeitos pendentes e false interrompe o atual sem concluí-lo. Seu callback de conclusão não executa, evitando interferência após Reset. .hide() oculta em seguida, remove opacidade em linha que possa ter ficado no meio e zera o contador.

Iniciar novamente faz a mesma limpeza e começa oculto. Desativar o botão evita acumular cliques e efeitos na fila. A limpeza fica restrita aos painéis e ao contador, sem alterar configurações globais.

Se falhar, confira o arquivo completo em Network e erros como .fadeIn is not a function em Console. Uma seleção vazia não executa callbacks por elemento. Verifique também visibility: hidden, ancestrais ocultos e regras display mais fortes: alterar opacidade não elimina toda causa de ocultação.