jQuery finish() effect

The jQuery finish method is used to stop the current running animation.

Syntax of finish() effect

$(selector).finish(queue_name) 

The selector is the element on which finish effect occurs. The queue_name is an optional parameter. It specifies the name of the queue.

Example

<style>
.demobox { 
width: 200px; 
height: 150px; 
background-color: #99FFFF;
border: 4px solid #00CCCC;	
padding: 25px;	
}
</style>

<div id="demo" class="demobox">Animation</div>
<button id="btnstart">Start Animation</button>
<button id="btnstop">Finish Animation</button>

<script>
$(document).ready(function(){
$("button#btnstart").click(function() {
$("div#demo").animate({
"width": 400,
}, {
"duration": 500,
"easing": "linear",
"complete": function() { 
	alert("finished!"); 
}
});
});
$("button#btnstop").click(function() {
$("div#demo").finish();
});
});
</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 'Finish Animation' button, the animation of div box of 'demo' id finished animation effect.