HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clearQueue cancels delay</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 28rem; }
    #box {
      padding: 20px;
      background: #bbf7d0;
      border: 2px solid #16a34a;
      border-radius: 8px;
    }
    button { margin: 8px 8px 0 0; padding: 8px 16px; }
    #status { margin-top: 12px; color: #64748b; }
  </style>
</head>
<body>
  <div id="box">I will slide up, pause, then fade in.</div>
  <button type="button" id="start">Start</button>
  <button type="button" id="stop">Stop (clearQueue)</button>
  <p id="status">Click Start, then Stop during the 2s delay.</p>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#start").on("click", function () {
      $("#box").stop(true, true).show();
      $("#status").text("Chain running…");
      $("#box")
        .slideUp(300)
        .delay(2000)
        .fadeIn(400, function () {
          $("#status").text("Fade in completed.");
        });
    });
    $("#stop").on("click", function () {
      $("#box").clearQueue().stop();
      $("#status").text("Pending delay and fadeIn cleared.");
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .clearQueue() — cancel pending delay (Try It)