The jQuery stop() method is used to stop animations or effects before it is finished.
This method works for all jQuery effect functions, sliding, fading and custom animations. The below example shows the stop sliding animation.
Syntax:
$(selector).stop(stopAll, goToEnd); Example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery stop() Animation Method</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#panel,
#flipto {padding: 5px;font-size: 18px;text-align: center;background-color: black;color: white;border: solid 1px #666;
border-radius: 3px;}
#stop{background-color: yellow;}
#panel {text-color: white;padding: 50px;display: none;}
</style>
</head>
<body>
<center>
<h3>jQuery stop() Animation Method</h3>
<button id="stop">Click Here to stop</button>
<br><br>
<div id=""><button id="flipto">Click Here to slideDown</button></div>
<div id="panel">Animation Panel</div>
<script>
$(document).ready(function() {
$("#flipto").click(function() {
$("#panel").slideDown(5000);
});
$("#stop").click(function() {
$("#panel").stop();
});
});
</script>
</center>
</body>
</html> Output:
jQuery stop() Animation Method
Animation Panel