Default Duration for jQuery Fade Animations

In jQuery, the default duration for fade animations is 400 milliseconds (0.4 seconds). When you call methods such as fadeIn(), fadeOut(), or fadeToggle() without passing a specific time parameter, jQuery automatically applies this 400ms duration to execute the effect. This article covers the default timing behavior, the built-in speed presets, and how to configure custom durations globally or on a per-animation basis.

Built-In Speed Presets

jQuery provides built-in string shortcuts alongside numeric millisecond values. When using string arguments with fade methods, the durations map as follows:

• "fast": 200 milliseconds
• "normal": 400 milliseconds (the default if no duration is specified)
• "slow": 600 milliseconds

For example, omitting the duration or passing "normal" yields the exact same animation speed:

// Runs with the default duration of 400 milliseconds
$('#element').fadeOut();

// Explicitly runs with 400 milliseconds
$('#element').fadeOut("normal");
$('#element').fadeOut(400);

Specifying Custom Durations

If the default 400ms duration does not fit your project's design requirements, you can pass custom integer values representing milliseconds directly into the fade methods:

// Fades in over 1 second (1000ms)
$('#element').fadeIn(1000);

// Fades out over 150 milliseconds
$('#element').fadeOut(150);

Changing the Global Default Duration

If you want to alter the default duration across your entire application without passing an argument to every method call, you can modify jQuery's internal animation settings via jQuery.fx.speeds:

// Change the default animation speed from 400ms to 800ms
jQuery.fx.speeds._default = 800;

// Now runs at 800ms automatically
$('#element').fadeIn();

You can also define custom named speed presets by adding properties directly to jQuery.fx.speeds:

jQuery.fx.speeds.extraSlow = 2000;

// Use your custom preset
$('#element').fadeIn("extraSlow");