JQuery – Easing Plugin – List of Possible Easings

I was surprised not to find any lists of these Easings anywhere online written as a list. For those who do not know, JQuery Easing Plugin is really amazing way to animate with JavaScript, I simply love it! I was looking at the possible easing solutions and could not a full list. The Plugin page does not present a full listing, but it does give you an example of how they work, which is great, but I am one of those people who likes to experiment!! =)

So I compiled a list of available Easing effects for JQuery plugin just in case you are like me:

Here is an array. I like to make my animation random, so I use this form sometimes and add Math.random() and  Math.round() functions:

var arrName = new Array();
arrName[0]=’def’;
arrName[1]=’jswing’;
arrName[2]=’easeInQuad’;
arrName[3]=’easeOutQuad’;
arrName[4]=’easeInOutQuad’;
arrName[5]=’easeInCubic’;
arrName[6]=’easeOutCubic’;
arrName[7]=’easeInOutCubic’;
arrName[8]=’easeInQuart’;
arrName[9]=’easeOutQuart’;
arrName[10]=’easeInOutQuart’;
arrName[11]=’easeInSine’;
arrName[12]=’easeOutSine’;
arrName[13]=’easeInOutSine’;
arrName[14]=’easeInExpo’;
arrName[15]=’easeOutExpo’;
arrName[16]=’easeInOutExpo’;
arrName[17]=’easeInQuint’;
arrName[18]=’easeOutQuint’;
arrName[19]=’easeInOutQuint’;
arrName[20]=’easeInCirc’;
arrName[21]=’easeOutCirc’;
arrName[22]=’easeInOutCirc’;
arrName[23]=’easeInElastic’;
arrName[24]=’easeOutElastic’;
arrName[25]=’easeInOutElastic’;
arrName[26]=’easeInBack’;
arrName[27]=’easeOutBack’;
arrName[28]=’easeInOutBack’;
arrName[29]=’easeInBounce’;
arrName[30]=’easeOutBounce’;
arrName[31]=’easeInOutBounce’;

Or if you just would like a list, here you go:

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

If you would like to learn more about the plugin and see it in action, here is the link to the Easing Plug-in Page: http://gsgd.co.uk/sandbox/jquery/easing/. Buy the guy who made it a beer while you’re there! 😉

Oh, and please let me know if I am missing something! Cheers!

Advertisements

About Nookeen

http://nookeen.com

Posted on November 11, 2010, in Articles, JQuery and tagged , , . Bookmark the permalink. 4 Comments.

  1. I recommend easeInOutCubic for most animations!

  2. Thanks Tony, I was just working with .animate actually, and I must admit, I did use this easing for my new portfolio slider. =)

  3. 403 error at that link.

    • Hmmm… You’re right! I tried to look for the new link, checked JQuery.com but they also provide the same link. If you need the plugin, feel free to download my copy (v1.3) from here. I don’t think the author would mind, since I do not believe it’s so hard to find else where on the net.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: