jQuery Stop Animations - jQuery stop() Method
jQuery stop() method is used to stop the animations (or effects) that is running on the selected elements before it is finished.
Syntax
$(selector).stop( [stopAll], [goToEnd] );
Parameters
stopAll Optional. Default: false This boolean parameter specifies that whether or not remove queued animation. It means only the current animation will be stopped, rest of the other animations in the queue will run afterwards.
goToEnd Optional. Default: false This boolean parameter specifies that whether or not to complete the current animation immediately.
Example
$(document).ready(function() {
$("#btnstart").click(function(){
$("div").animate({
marginLeft: "+=200px",
}, 3000);
});
$("#btnstop").click(function(){
$("div").stop();
});
$("#btnback").click(function(){
$("div").animate({
marginLeft: "0px",
}, 3000);
});
});
Example Result
jQuery stop() method with parameters
Example
$(document).ready(function() {
$("#btnstart").click(function(){
$("div").animate({marginLeft: "+=200px"}, 3000);
$("div").animate({fontSize: "25px"}, 3000);
});
$("#btnstop").click(function(){
$("div").stop();
});
$("#btnstopall").click(function(){
$("div").stop(true);
});
$("#btnstopandfinish").click(function(){
$("div").stop(true, true);
});
$("#btnback").click(function(){
$("div").animate({marginLeft: "0px"}, 3000);
$("div").animate({fontSize: "12px"}, 3000);
});
});
Example Result