When you are using jQuery for animation effects, you may wish to have the element act in a different manner than the default. This is where you apply the jQuery Easing effects. These effects can be applied to any method that has an easing: argument available.

To make use of these easing effects, you must link to additional .js files apart from the core jQuery .js files. You can hotlink to these files or you can download the files and place them with your other script files. Load the easing file after loading the core jQuery .js file in the <head> section of your document.

gsgd.co.uk/sandbox/jquery/easing/ - this is the link to the jQuery Easing plugin. You can download the necessary files from here.

 

The default jQuery Core easing effects

The core jQuery .js files have two possibilities for easing:

"linear" the effect will take place at a constant rate for the duration of the animation

"swing" the effect goes slowly at first, then at a faster rate, then slower again.

 

Chart of jQuery Easing Effects

 

How to apply the easing effects in jQuery

The easing effects can be applied when using the .animation() method, but they can also be applied to other methods such as .show(), .hide() and .toggle(). As you will see in the example below, the easing setting is placed after the duration, which is followed by a comma, and is wrapped in quotation marks.

Here is an example of the .animation(), .show(),  .hide() and .toggle() methods with an easing effect included:

$("#showAnimate").click(function(){
    $("#growBar").animate({
        width: "100%"
        }, 4000, "easeInOutElastic");
});

$("#showShow").click(function(){
    $("#growBar2").show(5000,"easeOutQuart");
});


$("#showHide").click(function(){
    $("#growBar3").hide(6000,"easeInOutQuint");
});

$("#showToggle").click(function(){
    $("#growBar4").toggle(5000, "linear");
});

Here is the result: