jQuery stop() Method – Halting Animations and Effects
The stop() method in jQuery is used to immediately halt ongoing animations
or effects before they complete. This method works with all animation types,
including sliding, fading, and custom animate() actions.
Syntax:
$(selector).stop(stopAll, goToEnd);
- stopAll (optional) – A boolean that determines whether the animation queue should be cleared.
- false (default): Only the current animation stops; queued animations will still run.
- true: Stops the current animation and clears all queued ones.
2.goToEnd (optional) – A boolean that decides if the
animation should jump to its final state.
- false (default): Animation stops at its current point.
- true: Animation immediately finishes and applies final styles.
Example – Basic Usage:
Here’s how to stop a sliding animation when a "Stop" button is
clicked:
<!DOCTYPE html>
<html>
<head>
<title>jQuery stop() Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("#panel").slideDown(5000); // Slide down slowly (5 seconds)
});
$("#stop").click(function(){
$("#panel").stop(); // Stop the animation immediately
});
});
</script>
<style>
#flip, #panel {
padding: 12px;
text-align: center;
background-color: #ff9933;
color: white;
border: 1px solid #aaa;
}
#panel {
padding: 50px;
display: none;
}
button {
margin: 10px;
padding: 8px 16px;
font-size: 16px;
}
</style>
</head>
<body>
<h2>jQuery stop() Example</h2>
<button id="start">Start Slide</button>
<button id="stop">Stop Slide</button>
<div id="panel">Hello! I am a panel</div>
</body>
</html>
This stops any active animation on #panel as soon as the button with #stop
is clicked.
More topic in jQuery
