Click to toggle dark text on white

Lession 4: Easing jQuery Animations

Easing is a very special effect added to a jQuery animation. Instead of a single, steady transition, it is possible to make animation speed or slow at the end, or even bounce. Fortunately you don't need to know how this works, as you can just use the easing plugin:

Easing is passed as the second to last argument to jQuery.animate(), or the last argument if there is no callback.

Show Code

$(document).ready(function() {
    $("#clickhere").click(function() {
            width: "200px"
        }, 1000, "easeOutSine");
            width: "200px"
        }, 2000, "easeOutExpo");
            width: "200px"
        }, 3000, "easeOutBounce");

Easing is so easy, it's easy to get carried away with it.

<< Animation Callbacks Chaining Animations Together >>


Most Recent Blog Post: jQuery Mapbox Updated

Privacy Policy | Click Here | jQuery Plugins by Wayfarer | Freelance Jobs Available | Random JavaScript Code Samples | Share a Random Link | JavaScript Jobs