0Pricing
jQuery Academy · Lección

Encadenamiento y puesta en cola de animaciones

Explore cómo encadenar varios métodos de animación y gestionar la cola de animaciones para crear efectos visuales secuenciales y coordinados en interfaces dinámicas.

Encadenamiento y puesta en cola de animaciones es una lección gratuita de jQuery Academy en CoddyKit. Esta es la lección 1 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de jQuery Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de jQuery Academy incluye 3 lecciones en total.

Introducción al encadenamiento de animaciones

Imagine que desea que un elemento se mueva, cambie de color y después desaparezca gradualmente. ¡Hacerlo manualmente, una acción después de otra, puede resultar complicado!

El encadenamiento de animaciones en jQuery permite vincular varios métodos de animación. Cada animación comienza únicamente después de que termina la anterior, lo que crea efectos fluidos y secuenciales.

Sintaxis básica del encadenamiento

Los métodos de jQuery suelen devolver el propio objeto jQuery. Esto permite llamar directamente a otro método sobre el resultado y formar una «cadena».

Aquí, un cuadro se mueve hacia la derecha y después hacia abajo. ¡Pruebe a ejecutarlo!

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

Crear secuencias complejas

Puede encadenar muchos métodos de animación. jQuery coloca automáticamente estas animaciones en una cola interna, lo que garantiza que se ejecuten en el orden que defina.

Esto crea un flujo secuencial para los elementos de su interfaz. ¡Observe cómo el cuadro se mueve, crece y después desaparece 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>

Cómo funciona la cola de animaciones

Cuando encadena métodos de animación, jQuery no los ejecuta todos a la vez. En su lugar, los añade a una lista especial llamada cola de animaciones (o cola «fx»).

  • La primera animación comienza de inmediato.
  • Las animaciones siguientes esperan en la cola.
  • Cuando termina una animación, jQuery toma automáticamente la siguiente de la cola y la inicia.

Esto garantiza que las animaciones se ejecuten de forma secuencial y predecible.

Añadir pausas con .delay()

A veces necesita hacer una pausa entre animaciones. ¡El método .delay() es perfecto para ello! Pausa durante un tiempo especificado la ejecución de los elementos posteriores de la cola de animaciones.

El cuadro se mueve, hace una pausa y vuelve a moverse.

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

Ejecutar código personalizado en la cola

Puede insertar funciones que no sean de animación directamente en la cola mediante .queue(). Esto permite realizar acciones, como cambiar un texto o añadir una clase, exactamente entre las animaciones.

La función se ejecuta cuando llega su turno en la cola. Recuerde llamar a next() dentro de su función personalizada para indicar a jQuery que continúe con el siguiente elemento de la cola.

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

Interrumpir animaciones con .stop()

¿Y si desea detener una animación a mitad de su ejecución? El método .stop() es la solución. Puede detener la animación que se esté ejecutando en ese momento sobre un elemento.

  • .stop(true): detiene la animación actual y vacía toda la cola de animaciones.
  • .stop(false, true): detiene la animación actual y la lleva directamente a su estado final, pero no vacía la cola.

Úselo con cuidado, ya que puede alterar las secuencias que ha planificado minuciosamente.

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

Saltar al final de una animación con .finish()

El método .finish() permite completar inmediatamente todas las animaciones que se estén ejecutando en un elemento y vaciar su cola de animaciones.

  • Es como llamar a .stop(true, true) en todas las animaciones.
  • El elemento salta instantáneamente al estado final de todas las animaciones en cola.

Resulta útil para los botones de «restablecer» o para llevar rápidamente un elemento a su estado animado final.

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

Encadenar varios efectos

¡El encadenamiento no sirve únicamente para .animate()! Puede encadenar muchos otros métodos de animación de jQuery, como .fadeIn(), .slideUp(), .slideToggle() y otros.

Estos métodos también utilizan la misma cola de animaciones, lo que permite crear secuencias visuales complejas fácilmente.

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

Comprobación rápida del encadenamiento

Considere el siguiente código de jQuery. ¿Cuál será el estado final de #myBox después de hacer clic en el botón?

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

Repaso: encadenamiento y colas

¡Excelente trabajo! Ha aprendido a crear efectos visuales dinámicos y secuenciales mediante el encadenamiento de animaciones y el mecanismo de colas de jQuery.

  • Encadenamiento: vincula varios métodos de animación.
  • Cola: jQuery gestiona las animaciones en una secuencia.
  • .delay(): añade una pausa entre animaciones.
  • .queue(): inserta funciones personalizadas en la cola.
  • .stop(): interrumpe las animaciones o vacía la cola.
  • .finish(): completa instantáneamente todas las animaciones en cola.

A continuación, profundizaremos en las funciones de easing personalizadas y los callbacks de animación para obtener un control aún más preciso.

Preguntas frecuentes

¿La lección «Encadenamiento y puesta en cola de animaciones» es gratis?

Sí — el texto completo de «Encadenamiento y puesta en cola de animaciones» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de jQuery Academy, actualiza a CoddyKit PRO. El curso de jQuery Academy incluye 3 lecciones en total.

¿Qué aprenderé en «Encadenamiento y puesta en cola de animaciones»?

Explore cómo encadenar varios métodos de animación y gestionar la cola de animaciones para crear efectos visuales secuenciales y coordinados en interfaces dinámicas. Practicas jQuery Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar jQuery Academy?

No se requiere experiencia previa. jQuery Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 3.

¿Cuánto tiempo toma la lección «Encadenamiento y puesta en cola de animaciones»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de jQuery Academy?

Sí. Cada lección de jQuery Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Encadenamiento y puesta en cola de animaciones
  2. Easing personalizado y callbacks de animación
  3. Efectos avanzados de alternancia y deslizamiento
← Volver a jQuery Academy