Objectives and outcomes

In this tutorial we are going to learn about jquery stop() function. We can stop all jquery effects including custom animations with stop() function. Example for the same is shown below:



Syntax for method

$(selector).stop(stopAll,goToEnd);

The stopAll parameter is used to stop all animations in the queue and if false value is provided then only current animation is stopped. goToEnd parameter is used when we have to complete the current animation immediately.
Note: Both the parameters are optional.
By default stopAll and goToEnd parameter has value false.




Welcom to codeshot !!





HTML code:

<html>
<head>
<meta charset="utf-8">
<title>Jquery stop method</title>
<script src="jquery/jquery.min.js"></script>
</head>
<body>
<div id="example">
<br/>
<p>Welcome to codeshot !!</p>
</div>
<br/>
<button id="butn1">Fade</button><br/>
<button id="butn2">Stop</button>
</body>
</html>


CSS stylesheet

<style>
#example
{
color:#fff;
backgroun-color:#585858;
font-size:24px;
height:100px;
text-align:center;
}
</style>


Javascript

<script>
$(document).ready(function()
{
$('#butn1').click(function()
{
$('#example').fadeTo(5000,0.3);
});
		
$('#butn2').click(function()
{
$('#example').stop();
});
});
</script>