HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>finish queued chain</title>
  <style>
    body { font-family: sans-serif; padding: 16px; }
    #box {
      width: 60px;
      height: 60px;
      background: #818cf8;
      border-radius: 8px;
      position: relative;
      left: 0;
      top: 0;
    }
    button { margin: 12px 8px 0 0; padding: 8px 16px; }
    #status { margin-top: 12px; color: #64748b; max-width: 28rem; }
  </style>
</head>
<body>
  <div id="box"></div>
  <button type="button" id="run">Run chain</button>
  <button type="button" id="finish">finish()</button>
  <p id="status">Chain: move right → move down → grow width. Finish mid-run jumps all targets.</p>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#run").on("click", function () {
      $("#box").stop(true, true).css({ left: 0, top: 0, width: 60 });
      $("#box")
        .animate({ left: 150 }, 2000)
        .animate({ top: 80 }, 2000)
        .animate({ width: 120 }, 2000);
    });
    $("#finish").on("click", function () {
      $("#box").finish();
      $("#status").text("Box should be at left:150, top:80, width:120.");
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .finish() — queued chain jump (Try It)