jQuery Fast and Slow Speed in Milliseconds

When animating elements using jQuery, developers often supply preset strings like 'fast' or 'slow' instead of numeric durations to control how quickly effects take place. In jQuery, passing the string 'fast' corresponds to a duration of 200 milliseconds, while passing 'slow' equals 600 milliseconds. Understanding these predefined speeds allows developers to maintain consistent timing across user interface animations or customize them to fit specific design requirements.

Exact Millisecond Durations

jQuery translates duration strings into numeric millisecond values as follows:

• 'fast': 200 milliseconds (0.2 seconds)
• 'slow': 600 milliseconds (0.6 seconds)
• Default: 400 milliseconds (0.4 seconds), used if no duration is specified or if an unrecognized string is passed.

These presets apply to all standard jQuery effect and animation methods, including .animate(), .fadeIn(), .fadeOut(), .slideUp(), .slideDown(), and .toggle().

// Runs for 200 milliseconds
$("#element").fadeIn("fast");

// Runs for 600 milliseconds
$("#element").slideUp("slow");

// Runs for the default 400 milliseconds
$("#element").fadeOut();

Modifying and Extending Speeds

jQuery stores these presets in the jQuery.fx.speeds object. The values can be altered globally or extended with custom named duration strings.

To redefine the default values for the entire application:

// Change existing duration presets
jQuery.fx.speeds.fast = 150;
jQuery.fx.speeds.slow = 800;
jQuery.fx.speeds._default = 500;

To define a new speed keyword:

// Add a custom speed
jQuery.fx.speeds.crawl = 2000;

// Use the custom speed in an animation
$("#element").slideDown("crawl");

Passing 'fast' and 'slow' provides an easy way to write readable code, but replacing them with explicit numbers—such as .fadeIn(200) or .slideUp(600)—achieves identical performance and allows for exact millisecond control.