HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.queue length</title>
  <style>
    body { font-family: sans-serif; padding: 16px; }
    div.box {
      margin: 3px; width: 40px; height: 40px; position: absolute;
      left: 0; top: 50px; background: green; display: none;
    }
    button { padding: 8px 14px; }
    span { color: #dc2626; font-weight: 600; }
    #status { margin-top: 100px; padding: 10px; background: #f1f5f9; border-radius: 6px; max-width: 28rem; }
  </style>
</head>
<body>
  <button type="button" id="show">Show Length of Queue</button>
  <div class="box"></div>
  <div id="status">Queue length is: <span>0</span></div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $( "#show" ).on( "click", function () {
      var n = jQuery.queue( $( "div.box" )[ 0 ], "fx" );
      $( "span" ).text( n.length );
    });

    function runIt() {
      $( "div.box" )
        .show( "slow" )
        .animate({ left: "+=200" }, 2000 )
        .slideToggle( 1000 )
        .slideToggle( "fast" )
        .animate({ left: "-=200" }, 1500 )
        .hide( "slow" )
        .show( 1200 )
        .slideUp( "normal", runIt );
    }
    runIt();
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery.queue() — show queue length (Try It)