jQuery Callback Function

The callback function is executed after the current animation is 100% complete.

Issues with jQuery animations

Many jQuery functions involve animations. These functions may affect speed or duration as an optional parameter.

Example:$("p").hide("slow")

speed or duration The parameter can be set to many different values, such as "slow", "fast", "normal", or milliseconds.

Example

$("button").click(function(){
$("p").hide(1000);
});

Try it yourself

Since JavaScript statements (instructions) are executed one by one - in order, statements after the animation may cause errors or page conflicts because the animation has not yet completed.

To avoid this situation, you can add the callback function as a parameter.

jQuery Callback Function

The callback function is called after the animation is 100% complete.

Typical syntax:

$(selector).hide(speed,callback)

callback The parameter is a function that is executed after the hide operation.

Incorrect (without callback)

$("p").hide(1000);
alert("The paragraph is now hidden");

Try it yourself

Correct (with callback)

$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

Try it yourself

Conclusion:If you want to execute statements after a function involving animation, please use the callback function.