You Are Here

jQuery Stop and Callback

jQuery Stop() Method:

The jQuery stop() method is used to stop animations or jQuery effects before it is finished.
It works for all jQuery effects, including sliding, fading and custom animations.

Example:

$(selector).stop(stopAll,goToEnd);
stopAll is an optional parameter. By default it is false but when set to true, it clears the animation queue, stopping the current and all the queued animations to stop immediately.
goToEnd is an optional parameter. By default, it is set to false, but when set to true, it causes currently running animation to immediately complete.

Example:

$("#start").click(function(){
var para = $("p");
para.animate({fontSize: '50px'}, 5000);
});
$("#stop").click(function(){
$("p").stop();
});
Try it

jQuery Callback Functions:

jQuery callback function executes when the current effect is completed 100%. The statements in jQuery are executed line by line. But the next line of code can be run even though the effect is not completed, this creates an error. So to avoid this you can create a callback function, this function executes after the current effect is finished.

Example:

This example is with a callback function.
$("button").click(function(){
$("div").hide("slow", function(){
alert("The div is now hidden");
});
});
Try it
The following example has no callback parameter, and the alert box will be displayed before the hide effect is completed.

Example:

This example is without a callback function.
$("button").click(function(){
$("div").hide(1000);
alert("The div is now hidden");
});
Try it

jQuery Chaining:

You can chain together methods or actions using jQuery. Using chaining you can run multiple jQuery methods on the same element within a single statement.

jQuery Chaining Method:

Firstly, we are writing jQuery statements one at a time but there is a technique called chaining. Chaining allows us to run multiple jQuery commands on after the other on the same element.
To chain an action, just append the action to the previous action.

Example:

$("#div").css("color", "orange").slideUp(3000).slideDown(3000);
Try it
The above example chains together the css(), slideUp(), and slideDown() methods. The “div” element first changes to orange, then it slides up, and then it slides down.
Note: While chaining, the line of code could become quite long. jQuery is not tough on the syntax, you can format it as you want with line breaks and indentations.
This code also works:

Example:

$("#div").css("color", "red")
.slideUp(3000)
.slideDown(3000);
Try it

Ask a Question

Your email address will not be published. Required fields are marked *