over 9 years ago
Welcome to findnerd, today we are going to discuss on stop() method in jQuery.
Firstly let know what is the use of stop() method ?
So basicaly stop() method is used for stoping animations or effects before it is finished.
syntex of stop() method
You can see bellow example:
- <!DOCTYPE html>
- <html>
- <head>
- <!-- here call the jquery library -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
- <script>
- $(document).ready(function(){
- $("#start").click(function(){
- $("#work").slideDown(5000);
- });
- $("#stop").click(function(){
- $("#work").stop();
- });
- });
- </script>
- <style>
- /*here write css of text and background color*/
- #work, #start {
- padding: 10px;
- font-size: 18px;
- text-align: center;
- background-color: #7FFFD4;
- color:#000;
- border: solid 1px #c3c3c3;
- border-radius: 3px;
- width:220px;
- }
- /*define padding of work id*/
- #work {
- width:220px;
- padding: 10px;
- display: none;
- }
- </style>
- </head>
- <body>
- <!-- here define a button and define it's id -->
- <p><button id="stop" style=" background-color: #7FFFD4; padding: 10px;">Stop Button</button></p>
- <div id="start">Click here to slide</div>
- <div id="work">Working Fine!</div>
- </body>
- </html>
<!DOCTYPE html> <html> <head> <!-- here call the jquery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("#start").click(function(){ $("#work").slideDown(5000); }); $("#stop").click(function(){ $("#work").stop(); }); }); </script> <style> /*here write css of text and background color*/ #work, #start { padding: 10px; font-size: 18px; text-align: center; background-color: #7FFFD4; color:#000; border: solid 1px #c3c3c3; border-radius: 3px; width:220px; } /*define padding of work id*/ #work { width:220px; padding: 10px; display: none; } </style> </head> <body> <!-- here define a button and define it's id --> <p><button id="stop" style=" background-color: #7FFFD4; padding: 10px;">Stop Button</button></p> <div id="start">Click here to slide</div> <div id="work">Working Fine!</div> </body> </html>
0 Comment(s)