The stop() is one of the animation function in Jquery. The JQuery Stop animation method is used to stop the running annotation.
JQuery Stop Animation :
The JQuery stop animation is used to stop one or more running animations. The stop() method will work on all animation functions including slideUp() slideDown() fade() and etc.
Syntax :
$(target).stop(); $(target).stop(stopAll,end);
Here the stopAll and end, bath parameters are optional. The stopAll parameter specifies that, is the animation queue is cleared or not. By default it will be in false mode this means the stop() method will stop only currently running animation.
The end parameter specifies that, whether the currently running animation is complete till the end or stop at the moment.
JQuery Stop Example :
[html]
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>stop demo</title>
<style>
div {
position: absolute;
background-color: #027d3a;
left: 0px;
top: 30px;
width: 60px;
height: 60px;
margin: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="go">>></button>
<button id="stop">
<b>||</b>
</button>
<button id="back"><<</button>
<div class="block"></div>
<script>
// Start animation
$("#go").click(function() {
$(".block").animate({
left : "+=200px"
}, 2000);
});
// Stop animation when button is clicked
$("#stop").click(function() {
$(".block").stop();
});
// Start animation in the opposite direction
$("#back").click(function() {
$(".block").animate({
left : "-=200px"
}, 2000);
});
</script>
</body>
</html>
[/html]
Happy Learning 🙂
