jQuery jQuery.fx.interval Property

What is the jQuery.fx.interval Property?

The jQuery.fx.interval or $.fx.interval property defines the default delay (in milliseconds) between animation timer ticks in the jQuery effects module. By adjusting this value, you can speed up or slow down all jQuery animations globally.

$(function() {
	$("#start").click(function() {
		jQuery.fx.interval = 80; // slower frame interval
		$("#box").stop(true).css("left", 0).animate({ left: "250px" }, 1000);
	});
});

Key Points

• The jQuery.fx.interval controls the interval (in ms) between each frame of all jQuery animations.
• Its default value is 13 milliseconds, balancing performance and smoothness.
• It is a static property, so changing it affects all animations like .animate(), .fadeIn(), and others globally.
• It is useful for customizing global animation pacing without altering individual calls.

How the $.fx.interval Property Works

When an animation runs, jQuery schedules repeated callbacks at every $.fx.interval milliseconds. Lower values yield smoother animations but higher CPU usage; higher values reduce CPU load but make animations appear choppy.

To apply changes to this property, make sure no animations are currently running or stop all ongoing animations beforehand.

Syntax

jQuery.fx.interval = newIntervalInMs;

Parameters

Example: Adjust Global Animation Interval

This example demonstrates how changing $.fx.interval affects animation speed globally by toggling between slow and fast settings.

$(document).ready(function() {
	$("#startSlow").click(function() {
		jQuery.fx.interval = 100; // slow animation
		$("#animateBox").stop(true).css("left", 0).animate({ left: "300px" }, 1000);
	});

	$("#startFast").click(function() {
		jQuery.fx.interval = 10; // fast animation
		$("#animateBox").stop(true).css("left", 0).animate({ left: "300px" }, 1000);
	});
});