jQuery stop() Effect

The jQuery stop method is used to stop the current running animation of the selected element.

Syntax of stop() effect

$(selector).stop(clear_queue, jump_to_end) 

The selector is the element on which stop effect occurs. Both parameters are optional and of boolean type. The clear_queue parameter specifies whether or not stop the queued animation and the jump_to_end parameter specifies whether or not immediately stop the current animation. Both values are by default false.

Example

<style>
.demobox {  
width: 200px; 
height: 150px; 
background-color: #FFFF99;
border: 2px solid black; 
padding: 20px; 
}
</style>

<div id="demo" class="demobox"> Animation </div>
<button id="btnstr">Start Animation</button>
<button id="btnstp">Stop Animation</button>

<script>
$(document).ready(function(){
$("button#btnstr").click(function() {
$("div#demo").animate({
"width": 400,
}, {
"duration": 500,
"easing": "linear"
});
});
$("button#btnstp").click(function() {
$("div#demo1").stop();
});
});
</script>

Output of the above code

In the above example, when the user click on the 'Start Animation' button, the div box of 'demo' id get animated according to the given animation effect and when the user click on the 'Stop Animation' button, the animation of div box of 'demo' id immediately stopped animation effect.