Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
jQuery stop() Method with Examples
The stop() method in jQuery is used to stop an animation before it ends.
Syntax
The syntax is as follows −
$(selector).stop(stopAll,goToEnd);
Above, stopAll clears all animation, whereas gotoEnd is used to specify whether to complete the current animation immediately or not.
Example
Let us now see an example to implement the jQuery stop() method −
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".button1").click(function(){
var div = $("div");
div.animate({height: 250}, "slow");
div.animate({left: "+=200",top: "+=100" }, "slow");
div.queue(function(){
div.dequeue();
});
div.animate({height: 150}, "slow");
div.animate({left: "10",top: "100" }, "slow");
$(".button2").click(function(){
$("div").stop();
});
});
});
</script>
<style>
div {
width:150px;
height:150px;
position:absolute;
left:10px;
top:100px;
background-color:orange;
}
</style>
</head>
<body>
<button class="button1">Begin</button>
<button class="button2">Stop</button>
<div></div>
</body>
</html>
Output
This will produce the following output −
After clicking “Begin”, the animation begins −
After clicking “Stop”, animation halts −
Updated on: 2019-12-31T06:35:24+05:30
211 Views
Advertisements