HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>queue read demo</title>

  <style>

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

    div.box { width: 40px; height: 40px; position: absolute; left: 0; top: 60px; background: green; display: none; }

    p { color: red; margin-top: 80px; }

  </style>

</head>

<body>

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

  <p>The queue length is: <span id="len">0</span></p>

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

  <script>

    var div = $("div.box");

    function runIt() {

      div

        .show("slow")

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

        .slideToggle(1000)

        .slideToggle("fast")

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

        .hide("slow")

        .show(1200)

        .slideUp("normal", runIt);

    }

    function showIt() {

      $("#len").text(div.queue("fx").length);

      setTimeout(showIt, 100);

    }

    runIt();

    showIt();

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .queue() — read fx queue length (Try It)