<!DOCTYPE html> <html> <head> <title>jQuery Stop sliding</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#click_here").click(function(){ $("#panel").slideDown(5000); }); $("#stop").click(function(){ $("#panel").stop(); }); }); </script> <style type="text/css"> #panel, #click_here { padding:5px; text-align: center; background-color:#0099da; border:solid 1px #0099da; color:#FFF; } #panel{padding:20px 30px 50px; color:#000; display:none; background:#EEE;} .btn{ padding:6px 12px; margin:5px 0px;} </style> </head> <body> <button type="button" id="stop" class="btn">Stop</button> <a href="#" style="text-decoration:none;"> <div id="click_here">Click Here! (Start Sliding)</div> </a> <div id="panel">This is sample stop() method.</div> </body> </html>
Output :
Topic :
Stop sliding
