HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>dequeue official demo</title>

  <style>

    body { font-family: sans-serif; padding: 16px; }

    div.box {

      width: 50px; height: 50px; position: absolute; left: 10px; top: 60px;

      background-color: yellow;

    }

    div.box.red { background-color: red; }

    button { padding: 8px 16px; }

    #status { margin-top: 80px; padding: 12px; background: #f1f5f9; border-radius: 6px; max-width: 28rem; }

  </style>

</head>

<body>

  <button type="button" id="start">Start</button>

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

  <div id="status">Click Start to run the full chain.</div>

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

  <script>

    $("#start").on("click", function () {

      $("div.box")

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

        .animate({ top: "0px" }, 600)

        .queue(function () {

          $(this).toggleClass("red").dequeue();

        })

        .animate({ left: "10px", top: "60px" }, 700);

      $("#status").text("Chain running — watch toggleClass then return.");

    });

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .dequeue() — official animation demo (Try It)