HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>queue add demo</title>

  <style>

    body { font-family: sans-serif; padding: 16px; cursor: pointer; min-height: 200px; }

    div.box { width: 40px; height: 40px; position: absolute; left: 0; top: 30px; background: green; display: none; }

    div.box.newcolor { background: blue; }

    #hint { margin-top: 80px; color: #64748b; }

  </style>

</head>

<body>

  <div class="box"></div>

  <p id="hint">Click anywhere on the page to run the chain.</p>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <script>

    $(document.body).on("click", function (e) {

      if ($(e.target).closest("#hint").length && e.target !== document.body) return;

      $("div.box")

        .show("slow")

        .animate({ left: "+=200" }, 2000)

        .queue(function () {

          $(this).addClass("newcolor").dequeue();

        })

        .animate({ left: "-=200" }, 500)

        .queue(function () {

          $(this).removeClass("newcolor").dequeue();

        })

        .slideUp();

      $("#hint").text("Chain running…");

    });

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .queue() — add queued callbacks (Try It)