jQuery Callback method

May 07, 2021 jQuery

1. jQuery Callback method

2. The problem with jQuery animation

3. Use a callback instance

4. No callback (callback)

jQuery Callback method

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

The problem with jQuery animation

Many jQuery functions involve animation. These functions may use speed or duration as optional arguments.

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

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

Tip: Because JavaScript statements (instructions) are executed one by one - in order, statements after the animation may produce errors or page conflicts because the animation is not finished yet.

To avoid this, you can add the Callback function as an argument.

Instance

The following examples callback functions after the hidden effect is fully implemented:

Use a callback instance

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

Give it a try

The following instances do not have callback functions, and the warning box pops up before the hidden effect is complete:

No callback (callback)

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

Online examples . . .

jQuery Callback method

Table of contents

jQuery Callback method

The problem with jQuery animation

Use a callback instance

No callback (callback)

Cookie Consent