How to Set Slow Animation Speed in jQuery

This guide explains how to control and slow down animation speeds in jQuery using built-in duration strings and custom millisecond values. By modifying the duration parameter in jQuery effect methods, you can create smooth, gradual transitions such as fades, slides, and custom property animations across your web page elements.

Using the Predefined "slow" String

jQuery includes built-in string shortcuts for standard speeds: "fast", which runs for 200 milliseconds, and "slow", which runs for 600 milliseconds.

To use the default slow speed, pass the string "slow" as the duration parameter into any jQuery animation or effect method.

// Using "slow" with fadeIn()
$("#element").fadeIn("slow");

// Using "slow" with slideUp()
$("#element").slideUp("slow");

// Using "slow" with the animate() method
$("#element").animate({
    opacity: 0.5,
    left: "+=50"
}, "slow");

Using Custom Millisecond Values

If the standard 600-millisecond duration of "slow" is still too fast for your needs, you can specify an exact time in milliseconds as an integer (1000 milliseconds equals 1 second).

// A 2-second animation (2000 ms)
$("#element").fadeOut(2000);

// A 3-second custom animation (3000 ms)
$("#box").animate({
    width: "300px",
    height: "300px"
}, 3000);

Changing the Default "slow" Duration Globally

You can also change the default time of the "slow" preset globally across your entire project by updating jQuery.fx.speeds.

// Redefine the default 'slow' speed to 1.5 seconds globally
jQuery.fx.speeds.slow = 1500;

// This will now take 1500 milliseconds instead of 600
$("#element").slideDown("slow");