HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>rAF vs fx.interval</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 32rem; line-height: 1.6; }
    .note { background: #eff6ff; border: 1px solid #93c5fd; padding: 14px; border-radius: 8px; margin: 12px 0; }
    #box { width: 50px; height: 50px; background: #7c3aed; border-radius: 8px; margin-top: 12px; }
    button { padding: 8px 16px; }
    pre { background: #f1f5f9; padding: 12px; border-radius: 6px; font-size: 13px; }
  </style>
</head>
<body>
  <div class="note">
    Modern browsers use <code>requestAnimationFrame</code> for jQuery effects.
    <code>jQuery.fx.interval</code> only affects legacy timer-based ticks.
  </div>
  <button type="button" id="run">Run fadeIn (rAF in modern browsers)</button>
  <div id="box" style="display:none"></div>
  <pre id="log">Click Run — interval property may not change smoothness here.</pre>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#run").on("click", function () {
      var raf = typeof window.requestAnimationFrame === "function";
      jQuery.fx.interval = 50;
      $("#box").hide().fadeIn(1200);
      $("#log").text(
        "requestAnimationFrame available: " + raf + "\n" +
        "fx.interval set to 50 — deprecated; no effect when rAF is used (jQuery 3+)."
      );
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery.fx.interval — rAF vs timer (Try It)