jQuery animate() Example with Callback Function

Use a callback function to display a message once the animation is completed. This snippet will animate every

html element and then replace the html with the message when the #link-id element is clicked.

$("#link-id").click(function() {
    $("p.animate").animate(
            {"height": "100px", "width": "250px"},
            "slow", function(){
                $(this).html("Animation Completed");
            });
});


Callback functions are very useful to perform certain activity when the animation is completed. It is also useful from running multiplt animations in a row, each when the previous one has completed.

When multiple elements are mapped with the animation and we have specified a callback function, the callback will get called for each of the elements that performed the animation.