What Is the Default Easing Method in jQuery?

This article provides a concise overview of the default animation easing method in the jQuery JavaScript library. Readers will learn which easing algorithm jQuery uses out of the box, how it impacts UI motion, how it compares to built-in alternatives, and how developers can globally modify or extend easing functions across their web projects.

The Default Easing: "swing"

The default easing method used by jQuery is "swing".

Whenever an animation method—such as .animate(), .fadeIn(), .slideDown(), or .slideToggle()—is called without specifying an easing parameter, jQuery automatically applies "swing" to calculate the transition between CSS property values.

How "swing" Functions

Easing dictates the rate of change of a parameter over time. The "swing" algorithm is designed to produce a natural-looking movement:

  • Pacing: It begins at a moderate pace, accelerates through the middle of the transition, and gently slows down before coming to a stop.
  • Mathematics: In standard jQuery core, swing is mathematically modeled using a cosine calculation: 0.5 - Math.cos(p * Math.PI) / 2, where p is the normalized progress of the animation between 0 and 1.
  • Visual Feel: This curve approximates an ease-in-out effect, preventing animations from feeling mechanical or jarring.

Core jQuery Easing Options

The standalone jQuery core library contains only two built-in easing functions:

  1. swing (Default): Non-linear progression that accelerates and decelerates.
  2. linear: Moves at an identical, constant speed from the start of the animation to the end.

Developers can specify linear directly within animation calls when a uniform speed is desired:

$("#element").animate({
    left: "300px"
}, 500, "linear");

Changing the Global Default Easing

If a project requires a different default behavior across all jQuery animations, the global setting can be modified using the jQuery.easing.def property:

// Set the default easing method to linear across the application
$.easing.def = "linear";

Once updated, any subsequent animation that does not explicitly declare an easing method will use the newly assigned default.

Extending Easing Methods

Because core jQuery only includes swing and linear, more complex curves—such as bounce, elastic, or quad transitions—require extension. Developers can add these by loading official libraries like jQuery UI, utilizing the third-party jQuery Easing plugin, or defining custom mathematical functions directly onto the jQuery.easing object.