Click to toggle dark text on white

Lession 5: Chaining jQuery Animations Together

Animations can be chained together. When one animation is chained to another it is the same as if it was put into the preceding animation's callback function. This is a convenient and easy method of having animations happen in order, one after the other.

Show Code

$(document).ready(function() {
    $("#clickhere").click(function() {
        $("#animate1").animate({
            width: "200px"
        }, 600).animate({
            height: "200px"
        }, 600).animate({
            width: "120px",
            height: "120px"
        }, 600).animate({
            marginLeft: "100px",
            borderWidth: "5px"
        }, 600);
    });
});

This can be a lot of fun.

<< Animation Easing

Wayfarer

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