HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery :animated timing</title>
  <style>
    #mover {
      background: #fef08a;
      border: 1px solid #ca8a04;
      padding: 16px;
      width: 200px;
    }
    #log {
      font-family: monospace;
      margin-top: 12px;
      white-space: pre-line;
      font-size: 13px;
    }
  </style>
</head>
<body>
  <div id="mover">Sliding box</div>
  <div id="log">Watch the log…</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    function log(msg) {
      $("#log").prepend(msg + "\n");
    }
    function animateIt() {
      log("Starting slide. Animated now: " + $(":animated").length);
      $("#mover").slideToggle("slow", function() {
        log("Finished. Animated now: " + $(":animated").length);
        animateIt();
      });
    }
    animateIt();
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery :animated timing — slideToggle loop (Try It)