jQuery Easing Examples

jQuery easing can make your animations look a lot better, but sometimes it's hard to choose which easing type to use.
I made this to have a simple way to see how the various easing settings will look on different effects. Enjoy!

Keep in mind that easeIn will affect the beginning of your animation, and easeOut will affect the end of your animation.

Choose an easing type:

Choose an effect:

Effect Duration (in milliseconds):

Power User Tip: Use the Left and Right arrow keys to cycle betwen easing types, and use Enter/Return to test and retest.

Where did fadeToggle() come from?

fadeToggle is now part of the effects core!

It can easily be added to the jQuery library, or any of your files using this code:

jQuery.fn.fadeToggle = function(speed, easing, callback) {
    return this.animate({opacity: 'toggle'}, speed, easing, callback);
};

Then it can be called like any other jQuery effect. Thanks to Karl Swedberg for posting that originally.