How to change jQuery's animation transition from linear to quadratic

Question

I think I noticed that all jQuery transitions (e.g. slide effect) work in a linear way. That means that the speed of the animation never changes.

I wondered if it would be possible to change this to a more quadratic behavior. That means, I want the animation to slowly start and then get faster.

Is there a way in jQuery to accomplish this?

Check out this question: http://stackoverflow.com/questions/5207301/looking-for-jquery-easing-functions-without-using-a-plugin — czerasz, Feb 09 '12 at 16:09

score 3 · Accepted Answer · answered Feb 09 '12 at 16:06

I don't think that's true, most jQuery function have an easing parameter (fadeIn/out, slideDown/up)
If you use slideDown (i make an example) you can specify an easing option which defaults to swing. If you want it linear you must specify it

.slideDown( [duration] [, easing] [, callback] )

Taken from the docs

Easing
As of jQuery 1.4.3, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

score 1 · Answer 2 · answered Feb 09 '12 at 16:08

Almost all jquery transitions have support for easing:

$('#something').animate( { left: 96 }, 'fast', 'swing' );
// 'swing' is the name of the easing function

A larger set of easing possibilities are available in this plugin: http://gsgd.co.uk/sandbox/jquery/easing/

How to change jQuery's animation transition from linear to quadratic

2 Answers2