stop method in jQuery with examples
1. stop() method id used to stop the currently running animation on the matched elements.
2. When the stop() method is called on an element, the currently running animation is stopped immediately.
Example 1 :
<html>
<head>
<title>stop</title>
<style>
#myDiv
{
height:100px;
width:100px;
background-color:orange;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#start").click(function () {
$("#myDiv").animate({ width: "500px" }, 5000);
});
$("#stop").click(function () {
$("#myDiv").stop();
});
$("#reset").click(function () {
$("#myDiv").animate({ width: "100px" }, 500);
});
});
</script>
</head>
<body>
<div id="myDiv"></div><br/>
<input type="button" id="start" Value="Start"/>
<input type="button" id="stop" Value="Stop"/>
<input type="button" id="reset" Value="Reset"/>
</body>
</html>
Demo :In the above example, we have used stop() method. We have created a div element and applied required CSS to it. We have also created buttons to demonstrate how stop() method works. On click of "Start" button we are calling animation() method on div element, which manipulates its CSS like an animation effect.
As soon as we click on "Stop" button the animation is stopped.
0 comments:
Post a Comment