Used to stop an animation or effect before it is finished.
It wont completely break the effect which means we can start the animation where we stopped.
Syntax $("#animatedBox").stop();
EDUCATION
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Stop Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: blue;
margin: 20px;
color: white;
text-align: center;
line-height: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<button onclick=' $("#animatedBox").click()' >Start animation</button>
<button onclick=' $("#animatedBox").stop()' >Stop animation</button>
<div id="animatedBox">Animation Box</div>
<script>
$(document).ready(function(){
// Animate the box on click
$("#animatedBox").click(function(){
// Stop any ongoing animations and animate to new values
$(this).stop().animate({
width: '200px',
height: '200px',
marginLeft: '50px',
opacity: 0.5
}, 5000, function(){
// Animation complete
alert("Animation complete!");
});
});
});
</script>
</body>
</html>
The animation start ones the id #animatedBox is clicked.
The stop() method is used before the animate() method to stop any ongoing animations on the element.
And then it start to animatte new values.
The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compiler.
