jQuery Academy · Lesson

Chaining and Queuing Animations

Explore how to chain multiple animation methods and manage the animation queue to create sequential and coordinated visual effects for dynamic interfaces.

Intro to Animation Chaining

Imagine you want an element to move, then change color, then fade out. Doing these one after another manually can be tricky!

Animation chaining in jQuery lets you link multiple animation methods together. Each animation starts only after the previous one completes, creating smooth, sequential effects.

Basic Chaining Syntax

jQuery methods often return the jQuery object itself. This allows you to call another method directly on the result, forming a 'chain'.

Here, a box moves right, then moves down. Try running it!

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

All lessons in this course

← Back to jQuery Academy