HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.queue clear</title>
  <style>
    body { font-family: sans-serif; padding: 16px; }
    div.box {
      margin: 3px; width: 40px; height: 40px; position: absolute;
      left: 0; top: 60px; background: green; display: none;
    }
    div.box.newcolor { background: blue; }
    button { margin-right: 8px; padding: 8px 14px; }
    #status { margin-top: 120px; padding: 10px; background: #f1f5f9; border-radius: 6px; max-width: 28rem; }
  </style>
</head>
<body>
  <button type="button" id="start">Start</button>
  <button type="button" id="stop">Stop</button>
  <div class="box"></div>
  <div id="status">Start a chain, then Stop to clear pending fx.</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $( "#start" ).on( "click", function () {
      var divs = $( "div.box" )
        .stop( true, true )
        .css({ left: 0 })
        .removeClass( "newcolor" )
        .show( "slow" )
        .animate({ left: "+=200" }, 5000 );

      jQuery.queue( divs[ 0 ], "fx", function () {
        $( this ).addClass( "newcolor" );
        jQuery.dequeue( this );
      });

      divs.animate({ left: "-=200" }, 1500 );

      jQuery.queue( divs[ 0 ], "fx", function () {
        $( this ).removeClass( "newcolor" );
        jQuery.dequeue( this );
      });

      divs.slideUp();
      $( "#status" ).text( "Running — click Stop anytime." );
    });

    $( "#stop" ).on( "click", function () {
      jQuery.queue( $( "div.box" )[ 0 ], "fx", [] );
      $( "div.box" ).stop();
      var n = jQuery.queue( $( "div.box" )[ 0 ], "fx" ).length;
      $( "#status" ).text( "Stopped. Queue length now: " + n );
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery.queue() — clear with [] and stop (Try It)