jQuery UI Easing Options

Easing functions control the rate of change during an animation. jQuery core includes linear and swing; jQuery UI Effects adds additional easing functions such as Quad, Cubic, Elastic, Back and Bounce variants.

Use an Easing Name Top ↑

$( "#box" ).animate(
    {
        left: "70%"
    },
    800,
    "easeOutBounce"
);

Available Names Top ↑

linear, swing, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce

Inspect the Loaded Easing Functions Top ↑

const easingNames =
    Object.keys( $.easing )
        .filter(function ( name ) {
            return typeof $.easing[ name ] ===
                "function";
        });

← jQuery UI

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: