jQuery jQuery.fx.interval Property

What You’ll Learn

The jQuery.fx.interval static property controls how many milliseconds pass between jQuery animation update ticks on legacy browsers. This tutorial covers the default value of 13 ms, deprecation in jQuery 3.0 and removal in 4.0, why it has no effect when requestAnimationFrame is supported, the rule that all animations must stop before changing the global interval, comparisons with requestAnimationFrame, jQuery.fx.off, and CSS transitions, and five hands-on examples from reading the default to modern best practices.

Introduction

When you call .animate(), .fadeIn(), or similar effect methods, jQuery does not update CSS on every pixel instantly. Instead, it runs a loop that advances each tween a little on every tick. On modern browsers that loop is driven by requestAnimationFrame, synced to the display refresh rate. On older browsers without rAF, jQuery falls back to a single shared timer whose frequency is controlled by jQuery.fx.interval.

Added in jQuery 1.4.3, this global property let developers tune animation smoothness versus CPU cost. The default of 13 milliseconds means roughly 77 ticks per second on the timer fallback path. Understanding fx.interval matters mainly for maintaining legacy jQuery codebases and for knowing why tweaking it rarely changes behavior in browsers shipped today.

Understanding the jQuery.fx.interval Property

Per the official jQuery API, jQuery.fx.interval is the rate in milliseconds at which animations fire. It is a static property on the global jQuery.fx object — not a method you call on a jQuery collection like $(selector).animate().

Read it to inspect the current tick interval; assign a number to change it. Because jQuery maintains one global animation timer, the new value applies to every subsequent animation that uses the timer fallback. Animations already running continue on the old interval until they finish or you stop them with .stop() or .finish().

📝 Syntax

One global numeric property on jQuery.fx:

// Read the current interval (default 13) - since jQuery 1.4.3
jQuery.fx.interval

// Write a new interval in milliseconds (stop all animations first)
jQuery.fx.interval = 50

Type and default

• Type: Number — milliseconds between animation ticks on the timer fallback path.
• Default: 13 — roughly 77 updates per second when the timer drives animations.
• Scope: Global — one value shared by every jQuery animation on the page.

Version notes

• Added: jQuery 1.4.3
• Deprecated: jQuery 3.0 — no effect when requestAnimationFrame is supported.
• Removed: jQuery 4.0 — property no longer exists; use rAF-native animation approaches instead.

Official jQuery API description

// Stop every animation, then raise the global tick interval:
$( ":animated" ).stop( true, true );
jQuery.fx.interval = 50;
$( "#box" ).animate({ left: 300 }, 2000 );

// Reset to default when done (still requires no running animations):
$( ":animated" ).stop( true, true );
jQuery.fx.interval = 13;

Examples Gallery

Each example demonstrates a core jQuery.fx.interval concept from reading the default to modern alternatives. Open DevTools or use the Try-it links. Example 1 mirrors the property read pattern on api.jquery.com/jQuery.fx.interval/.

// Read the global tick interval (default 13 ms)
console.log( "jQuery.fx.interval:", jQuery.fx.interval );

// Confirm type is a Number
console.log( "typeof:", typeof jQuery.fx.interval );

// On jQuery 3+ with requestAnimationFrame, changing this later
// may have no visible effect even though the property still reads 13
$( "#log-default" ).on( "click", function() {
  $( "#output" ).text(
    "jQuery.fx.interval = " + jQuery.fx.interval + " ms"
  );
} );

Console: jQuery.fx.interval: 13
typeof: number
UI: jQuery.fx.interval = 13 ms

function stopAll() {
  $( ":animated" ).stop( true, true );
}
$( "#slow-tick" ).on( "click", function() {
  stopAll();
  jQuery.fx.interval = 50;
  $( "#tick-box" )
    .css({ left: 0 })
    .animate({ left: 280 }, 2000 );
} );
$( "#default-tick" ).on( "click", function() {
  stopAll();
  jQuery.fx.interval = 13;
  $( "#tick-box" )
    .css({ left: 0 })
    .animate({ left: 280 }, 2000 );
} );

At interval 50: box advances in ~20 steps over 2s (choppier on timer fallback)
At interval 13: box advances in ~154 steps (smoother on timer fallback)
On rAF browsers both may look identical regardless of fx.interval

jQuery.fx.interval = 13;
$( "#start-move" ).on( "click", function() {
  $( "#rule-box" )
    .stop( true, true )
    .css({ left: 0 })
    .animate({ left: 280 }, 3000 );
} );
$( "#change-mid" ).on( "click", function() {
  // This does NOT affect the animation already running:
  jQuery.fx.interval = 50;
  $( "#status" ).text(
    "Set fx.interval to 50 mid-flight - active tween still on old timer"
  );
} );
$( "#restart-slow" ).on( "click", function() {
  $( ":animated" ).stop( true, true );
  jQuery.fx.interval = 50;
  $( "#rule-box" )
    .css({ left: 0 })
    .animate({ left: 280 }, 3000 );
  $( "#status" ).text(
    "Stopped all, set 50, restarted - new interval applies"
  );
} );

Mid-animation fx.interval change: no visible change until animations stopped
After stop + restart at 50: choppier motion on timer fallback browsers

var hasRAF = !!window.requestAnimationFrame;
$( "#check-rAF" ).on( "click", function() {
  var msg = hasRAF
    ? "rAF supported: jQuery.fx.interval is ignored for smooth updates"
    : "No rAF: jQuery.fx.interval controls tick rate (default 13 ms)";
  $( "#rAF-status" ).text( msg );
  console.log( "requestAnimationFrame:", hasRAF );
  console.log( "jQuery.fx.interval:", jQuery.fx.interval );
} );

// Conceptual comparison (not jQuery internals):
// rAF path:     browser paints -> jQuery updates tween -> repeat
// Timer path:   every fx.interval ms -> jQuery updates tween -> repeat

Modern browser: rAF supported - fx.interval is ignored for smooth updates
Legacy IE/old WebKit: No rAF - fx.interval controls tick rate (default 13 ms)

// Modern: CSS transition (GPU-friendly, per-element timing)
$( "#css-move" ).on( "click", function() {
  $( "#modern-box" ).css({
    transition: "left 2s ease",
    left: $( this ).data( "target" ) ? 0 : 280
  });
  $( this ).data( "target", !$( this ).data( "target" ) );
} );

// Legacy jQuery global toggle (sibling to fx.interval):
// jQuery.fx.off = true;  // disables ALL effects instantly

// Avoid in new code:
// jQuery.fx.interval = 50;  // deprecated, removed in jQuery 4.0

CSS transition: smooth left slide independent of jQuery.fx.interval
jQuery.fx.off = true: all .animate() calls jump to end state (accessibility/testing)
Do not ship new features that depend on tuning fx.interval

🚀 Common Use Cases

• Legacy IE maintenance — tune tick smoothness on browsers without requestAnimationFrame by raising or lowering jQuery.fx.interval after stopping animations.
• Debugging choppy jQuery motion — log jQuery.fx.interval and check whether rAF is active before blaming duration or easing settings.
• Performance profiling on old hardware — temporarily increase the interval to reduce timer callbacks during heavy multi-element animations on timer-fallback browsers.
• Educational demos — compare timer-driven versus rAF-driven updates so beginners understand jQuery’s animation pipeline evolution.
• Pre-migration audits — search codebases for fx.interval assignments before upgrading from jQuery 3.x to 4.0 where the property is removed.
• Accessibility testing pairs — use jQuery.fx.off alongside interval knowledge to disable or inspect effect behavior globally.

📝 Notes

• Added in jQuery 1.4.3 as a global Number property on jQuery.fx, not an instance method.
• Default value is 13 milliseconds between timer-driven animation ticks.
• Deprecated in jQuery 3.0; has no effect when requestAnimationFrame is supported.
• Removed entirely in jQuery 4.0 — migrate away before upgrading.
• One global interval shared by all jQuery animations on the page; not per-element or per-queue.
• Stop all running animations with $( ":animated" ).stop( true, true ) before changing the interval.
• Sibling global jQuery.fx.off = true disables all effects rather than adjusting tick rate.

💡 Best Practices