Change jQuery Animation Speed with $.fx.speeds

jQuery animations rely on built-in duration presets such as slow, fast, and a standard default speed. By interacting with the $.fx.speeds configuration object, you can globally alter the millisecond values assigned to these existing presets or introduce custom speed identifiers. This approach ensures consistent animation pacing across your entire web application without having to manually pass numeric millisecond values into individual jQuery animation methods.

Understanding Default jQuery Speeds

By default, jQuery defines three speed settings mapped to millisecond values inside the $.fx.speeds object:

• $.fx.speeds.fast: 200 milliseconds
• $.fx.speeds._default: 400 milliseconds
• $.fx.speeds.slow: 600 milliseconds

Whenever you call methods like .fadeIn(), .slideUp(), or .animate() without specifying a duration, jQuery uses $.fx.speeds._default.

Modifying Existing Default Speeds

To alter the timing globally for all instances of slow, fast, or the fallback default duration, reassign the corresponding properties on the $.fx.speeds object. Place this code after the jQuery library is loaded and before your animation calls execute:

// Make "fast" animations finish even faster (100ms)
$.fx.speeds.fast = 100;

// Slow down all "slow" animations globally (1000ms)
$.fx.speeds.slow = 1000;

// Change the standard default animation speed (800ms)
$.fx.speeds._default = 800;

Any standard animation using these keywords will automatically adopt the new durations:

// Runs at 100ms instead of the original 200ms
$('#alert-box').fadeIn('fast');

// Runs at 800ms instead of the original 400ms
$('#dropdown-menu').slideToggle();

Adding Custom Speed Presets

You can also extend $.fx.speeds by adding custom string identifiers. This improves code readability and centralizes animation timing across your UI components:

// Define custom speed presets
$.fx.speeds.turtle = 2500;
$.fx.speeds.instant = 50;

// Use the custom presets in animation methods
$('.tooltip').fadeIn('instant');
$('.hero-banner').slideDown('turtle');

Modifying $.fx.speeds alters durations globally for the entire document context, providing an efficient way to theme animations or adjust site performance across multiple components simultaneously.