<!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> <script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'}),_trfd.push({'ap':'cpsh'},{'server':'sg2plcpnl0084'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/tcc/tcc_l.combined.1.0.6.min.js'></script></html>
Output :
Topic :
Stop sliding
