The jQuery stop() method is used to stop the currently running animation or effect on an element. It is a very useful method when you want to stop an animation or effect in the middle of its execution. The stop() method can be used with any jQuery animation or effect method such as animate(), fadeIn(), fadeOut(), slideUp(), slideDown(), etc.
The stop() method has two optional parameters: clearQueue and jumpToEnd. The clearQueue parameter is used to clear the animation queue of the element. If it is set to true, all the queued animations will be removed. The jumpToEnd parameter is used to jump to the end of the animation. If it is set to true, the animation will be stopped at its final state.
Here is the syntax of the stop() method:
$(selector).stop(clearQueue, jumpToEnd);
Let's see some examples of how to use the stop() method:
In this example, we will stop the animation of a div element when a button is clicked:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Stop() Method Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '250px'}, 5000);
});
$("button.stop").click(function(){
$("div").stop();
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<button class="stop">Stop Animation</button>
<div style="background-color: #abc; height: 100px; width: 100px; position: relative;"></div>
</body>
</html>
In this example, we have a div element that will move to the right when the "Start Animation" button is clicked. We have also added a "Stop Animation" button that will stop the animation when clicked. The stop() method is used to stop the animation of the div element.
In this example, we will stop the animation of a div element and clear its animation queue when a button is clicked:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Stop() Method Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '250px'}, 5000);
$("div").animate({top: '250px'}, 5000);
$("div").animate({left: '0px'}, 5000);
$("div").animate({top: '0px'}, 5000);
});
$("button.stop").click(function(){
$("div").stop(true);
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<button class="stop">Stop Animation</button>
<div style="background-color: #abc; height: 100px; width: 100px; position: relative;"></div>
</body>
</html>
In this example, we have added four animations to the div element when the "Start Animation" button is clicked. We have also added a "Stop Animation" button that will stop the animation and clear the animation queue when clicked. The stop() method is used with the clearQueue parameter set to true to clear the animation queue of the div element.
In this example, we will stop the animation of a div element and jump to its final state when a button is clicked:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Stop() Method Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '250px'}, 5000);
});
$("button.stop").click(function(){
$("div").stop(false, true);
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<button class="stop">Stop Animation</button>
<div style="background-color: #abc; height: 100px; width: 100px; position: relative;"></div>
</body>
</html>
In this example, we have a div element that will move to the right when the "Start Animation" button is clicked. We have also added a "Stop Animation" button that will stop the animation and jump to its final state when clicked. The stop() method is used with the jumpToEnd parameter set to true to jump to the final state of the animation.
These are just a few examples of how to use the jQuery stop() method. You can use it with any jQuery animation or effect method to stop the animation or effect in the middle of its execution.