`
jQuery Stop
jQuery Stop() Method
The stop() method is used to stop the current animation or effect being performed on the selected element before it is finished. Suppose you start a panel sliding up and down. You want to stop it before finishing sliding. In that case we use jQuery stop method. The stop() method works for all jQuery effect functions, including sliding, fading and custom animations.
Syntax
$(selector).stop(stopAll,goToEnd);
- stopAll - stopAll parameter specifies whether also the animation queue should be cleared or not. Default is false, which means that only the active animation will be stopped
- goToEnd - The optional goToEnd parameter specifies whether or not to complete the current animation immediately. Default is false.
The following example demonstrates the stop() method.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flipid").click(function(){
$("#panelid").slideDown(5000);
});
$("#stopid").click(function(){
$("#panelid").stop();
});
});
</script>
<style>
#flipid {
padding: 5px;
text-align: center;
background-color: red;
border: solid 1px green;
}
#panelid {
padding: 5px;
text-align: center;
background-color: green;
border: solid 1px green;
color:white;
}
#panelid {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<button id="stopid">Stop sliding</button>
<div id="flipid">Click to slide down</div>
<div id="panelid">Tutorialstrend.com!</div>
</body>
</html>Output
Now click on the Click to slide down. Now click on the Stop sliding before it is finished.
Prev Next