$(selector).stop(stopAll, goToEnd);
The optional stopAll Boolean parameter specifies whether also the animation queued should be cleared or not. Default value is false, that means only the current animation will be stopped, rest of the animations in the queue will run afterwards.
The optional goToEnd Boolean parameter specifies whether to complete the current animation immediately. Default value is false.
Here's a simple example that demonstrates the jQuery stop() method in real action in which you can start and stop the animation on click of the button.
<!DOCTYPE html>
<html>
<head>
<title>jQuery stop() method</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Start animation
$(".start-btn").click(function(){
$("img").animate({left: "+=200px"}, 2000);
});
// Stop running animation
$(".stop-btn").click(function(){
$("img").stop();
});
// Start animation in the opposite direction
$(".back-btn").click(function(){
$("img").animate({left: "-=200px"}, 2000);
});
// Reset to default
$(".reset-btn").click(function(){
$("img").animate({left: "0"}, "fast");
});
});
</script>
<style type="text/css">
.btn{ padding:6px 12px; margin:5px 0px;}
img{position: relative;}
</style>
</head>
<body>
<button type="button" class="start-btn btn">Start</button>
<button type="button" class="stop-btn btn">Stop</button>
<button type="button" class="back-btn btn">Back</button>
<button type="button" class="reset-btn btn">Reset</button>
<p><img src="images/Free-Time-Learning.png" alt="Free Time Learning"></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery stop() method</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#click_here").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style type="text/css">
#panel, #click_here {
padding:5px; text-align: center;
background-color:#0099da;
border:solid 1px #0099da;
color:#FFF;
}
#panel{padding:20px 30px 50px; color:#000; display:none; background:#EEE;}
.btn{ padding:6px 12px; margin:5px 0px;}
</style>
</head>
<body>
<button type="button" id="stop" class="btn">Stop</button>
<a href="#" style="text-decoration:none;">
<div id="click_here">Click Here! (Start Sliding)</div>
</a>
<div id="panel">This is sample stop() method.</div>
</body>
</html>