0Pricing
jQuery Academy · Aula

Encadeamento e Enfileiramento de Animações

Explore como encadear vários métodos de animação e gerenciar a fila de animações para criar efeitos visuais sequenciais e coordenados em interfaces dinâmicas.

Encadeamento e Enfileiramento de Animações é uma aula grátis de jQuery Academy no CoddyKit. Esta é a aula 1 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de jQuery Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de jQuery Academy inclui 3 aulas no total.

Introdução ao encadeamento de animações

Imagine que você queira mover um elemento, mudar sua cor e depois fazê-lo desaparecer gradualmente. Fazer tudo isso manualmente, uma etapa após a outra, pode ser complicado!

O encadeamento de animações no jQuery permite vincular vários métodos de animação. Cada animação começa somente depois que a anterior termina, criando efeitos suaves e sequenciais.

Sintaxe básica de encadeamento

Os métodos do jQuery geralmente retornam o próprio objeto jQuery. Isso permite chamar outro método diretamente no resultado, formando uma “cadeia”.

Aqui, uma caixa se move para a direita e depois para baixo. Tente executá-la!

<!DOCTYPE html>
<html>
<head>
<title>jQuery Chaining</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Chain</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 1000) // Move right
          .animate({top: '50px'}, 800); // Move down
      });
    });
  </script>
</body>
</html>

Criando sequências complexas

Você pode encadear muitos métodos de animação. O jQuery coloca automaticamente essas animações em uma fila interna, garantindo que sejam executadas na ordem definida.

Isso cria um fluxo sequencial para os elementos da sua interface. Observe a caixa se mover, crescer e depois desaparecer gradualmente!

<!DOCTYPE html>
<html>
<head>
<title>Complex Chaining</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: green;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Sequence</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800)
          .animate({height: '100px', width: '100px'}, 600)
          .animate({opacity: 0.5}, 500)
          .animate({top: '100px'}, 700)
          .fadeOut(500); // Fades out completely
      });
    });
  </script>
</body>
</html>

Como funciona a fila de animação

Quando você encadeia métodos de animação, o jQuery não os executa todos ao mesmo tempo. Em vez disso, ele os adiciona a uma lista especial chamada fila de animação (ou fila “fx”).

  • A primeira animação começa imediatamente.
  • As animações seguintes aguardam na fila.
  • Quando uma animação termina, o jQuery retira automaticamente a próxima da fila e a inicia.

Isso garante que suas animações sejam executadas de forma sequencial e previsível.

Adicionando pausas com .delay()

Às vezes, você precisa de uma pausa entre as animações. O método .delay() é perfeito para isso! Ele pausa a execução dos itens seguintes na fila de animação durante um período especificado.

A caixa se move, faz uma pausa e depois se move novamente.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Delay</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: purple;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Animation</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800) // Move right
          .delay(1000) // Pause for 1 second
          .animate({top: '50px'}, 800); // Move down
      });
    });
  </script>
</body>
</html>

Executando código personalizado na fila

Você pode inserir funções que não sejam de animação diretamente na fila usando .queue(). Isso permite realizar ações, como alterar um texto ou adicionar uma classe, exatamente entre as animações.

A função é executada quando chega a sua vez na fila. Lembre-se de chamar next() dentro da sua função personalizada para informar ao jQuery que deve avançar para o próximo item da fila!

<!DOCTYPE html>
<html>
<head>
<title>Custom Queue Function</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: orange;
    position: relative;
    left: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <p id="status">Ready</p>
  <button id="startAnimation">Start Sequence</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800)
          .queue(function(next) { // Add custom function to queue
            $(this).css("background-color", "blue");
            $("#status").text("Color changed!");
            next(); // Crucial: tells jQuery to proceed
          })
          .animate({top: '50px'}, 800)
          .queue(function(next) {
            $("#status").text("Animation done!");
            next();
          });
      });
    });
  </script>
</body>
</html>

Interrompendo animações com .stop()

E se você quiser interromper uma animação no meio? O método .stop() é a resposta. Ele pode interromper a animação em execução no momento em um elemento.

  • .stop(true): Interrompe a animação atual e limpa toda a fila de animação.
  • .stop(false, true): Interrompe a animação atual e a leva ao estado final, mas não limpa a fila.

Use-o com cuidado, pois ele pode desorganizar suas sequências planejadas.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Stop</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: teal;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start</button>
  <button id="stopAnimation">Stop (clear queue)</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 2000)
          .animate({top: '100px'}, 2000)
          .animate({left: '0px'}, 2000);
      });

      $("#stopAnimation").on("click", function() {
        $("#myBox").stop(true, false); // Stop current, clear queue, don't jump to end
      });
    });
  </script>
</body>
</html>

Pulando para o fim da animação com .finish()

O método .finish() é uma maneira poderosa de concluir imediatamente todas as animações em execução em um elemento e limpar sua fila de animação.

  • É como chamar .stop(true, true) em todas as animações.
  • O elemento passa instantaneamente ao estado final de todas as animações enfileiradas.

Isso é útil para botões de “redefinição” ou para levar rapidamente um elemento ao seu estado final animado.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Finish</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: darkblue;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Long Chain</button>
  <button id="finishAnimation">Finish All</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 3000)
          .animate({top: '100px'}, 3000)
          .animate({width: '100px'}, 3000);
      });

      $("#finishAnimation").on("click", function() {
        $("#myBox").finish(); // Instantly jump to final state
      });
    });
  </script>
</body>
</html>

Encadeando vários efeitos

O encadeamento não serve apenas para .animate()! Você pode encadear muitos outros métodos de animação do jQuery, como .fadeIn(), .slideUp(), .slideToggle() e outros.

Esses métodos também usam a mesma fila de animação, permitindo criar sequências visuais complexas com facilidade.

<!DOCTYPE html>
<html>
<head>
<title>Mixed Animation Chain</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 80px;
    height: 80px;
    background-color: #3498db;
    margin-bottom: 10px;
    display: none; /* Start hidden */
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Mixed Chain</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .fadeIn(500) // Fade in
          .delay(500) // Pause
          .slideUp(500) // Slide up
          .delay(500) // Pause
          .slideDown(500) // Slide down
          .animate({width: '120px', height: '120px'}, 700); // Grow
      });
    });
  </script>
</body>
</html>

Verificação rápida do encadeamento

Considere o código jQuery a seguir. Qual será o estado final de #myBox depois que o botão for clicado?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  #myBox {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: relative;
    left: 0px;
    opacity: 1;
  }
</style>
</head>
<body>
  <div id="myBox"></div>
  <button id="btn">Click Me</button>
  <script>
    $(document).ready(function() {
      $("#btn").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 500)
          .delay(500)
          .animate({opacity: 0.5}, 500)
          .hide(500);
      });
    });
  </script>
</body>
</html>

Revisão: encadeamento e filas

Excelente trabalho! Você aprendeu a criar efeitos visuais dinâmicos e sequenciais usando o encadeamento de animações e o mecanismo de filas do jQuery.

  • Encadeamento: Vincula vários métodos de animação.
  • Fila: O jQuery gerencia as animações em uma sequência.
  • .delay(): Faz uma pausa entre as animações.
  • .queue(): Insere funções personalizadas na fila.
  • .stop(): Interrompe ou limpa a fila.
  • .finish(): Conclui instantaneamente todas as animações enfileiradas.

Em seguida, exploraremos as funções de suavização personalizadas e os retornos de chamada de animação para obter um controle ainda mais preciso!

Perguntas Frequentes

A aula “Encadeamento e Enfileiramento de Animações” é grátis?

Sim — o texto completo de “Encadeamento e Enfileiramento de Animações” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de jQuery Academy, atualize para CoddyKit PRO. O curso de jQuery Academy inclui 3 aulas no total.

O que vou aprender em “Encadeamento e Enfileiramento de Animações”?

Explore como encadear vários métodos de animação e gerenciar a fila de animações para criar efeitos visuais sequenciais e coordenados em interfaces dinâmicas. Você pratica jQuery Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar jQuery Academy?

Nenhuma experiência prévia é necessária. jQuery Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 3.

Quanto tempo leva a aula “Encadeamento e Enfileiramento de Animações”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de jQuery Academy?

Sim. Cada aula de jQuery Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Encadeamento e Enfileiramento de Animações
  2. Suavização Personalizada e Retornos de Chamada de Animações
  3. Efeitos Avançados de Alternância e Deslizamento
← Voltar para jQuery Academy