JQuery : Stop() Method
JQuery stop() method is used to stop the effect before it is over. The stop methods work for all types of effects like fade, animation, functions, sliding.
Syntax :
$(selector).stop(stopAll,goToEnd);
The stopAll and goToEnd parameter are optional. The stopAll parameter tells whether to clear the other queued effects or not. By default it is false i.e. we can stop the effect on the active effect, allowing other effects to be performed afterwards.
The goToEnd parameter tells whether or not to complete the current effect immediately, default is false. By default the stop() methods kills the current effect.
Example :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <html> <head> <title>jquery example</title> <!-- This line will load the bootstrap css file --> <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> <!-- This file will load jquery file so that we can use its function --> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> </head> <body> <div class="panel panel-primary"> <h3 class="text-primary" align="center"> jquery example : stop() method</h3> </div> <div class="panel panel-primary" align="center"> <button align="center" class="btn btn-md btn-primary">Click to stop sliding</button> </div> <div id="div1" class="panel panel-primary" style="background-color:yellow;"> <p align="center" class="text text-primary">Click on this panel to slide down another panel below this. This is the div with id="div1"</p> </div> <div id="div2" align="center" style="background-color:yellow;display:none;height:300px;" class="panel panel-primary"> <p align="center" style="background-color:yellow;" class="text text-primary">This is the under the div with id="div2"</p> </div> </body> <script type="text/javascript"> $(document).ready(function(){ $("#div1").click(function(){ /*On the click of div with id="div1" the dive with id="div2" will slide down slowly syntax : $(selector).slideDown(speed,callback);*/ $("#div2").slideDown("slow"); }); /*The following function will prevent the effect to execute when button is clicked*/ $("button").click(function(){ $("#div2").stop(); }); }); </script> </html> |
I hope the above example is easy to understand and now you have an idea how to work with stop() method. If you still have difficulties, you can get the working example from the git. You can get other example from this link also.
0 comments:
Post a Comment