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: gsgd.co.uk/sandbox/jquery/easing/.

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

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

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

<< Animation Callbacks Chaining Animations Together >>

Wayfarer

© 2006-2012 Abel Mohler How to Hire Me | How Websites are Built | For Developers: jQuery Thumbnail Script