Html
copy
reset
Run
Netbax Online Editor Try it Yourself
<button id="stop1">Click to stop sliding</button> <span class="stop">Contrary to popular belief</span> <button id="stop">Click to slide down</button> <style> .stop, #stop { padding: 5px; font-size: 17px; text-align: center; background-color: #ff3800; color: #fff; border: solid 1px #000; border-radius: 2px; } #stop1 { padding: 5px; font-size: 17px; text-align: center; background-color: #c00; color: #fff; border: solid 1px #000; border-radius: 2px; } .stop { padding: 40px; display: none; } </style> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $(document).ready(function(){ $("#stop").click(function(){ $(".stop").slideDown(7000); }); $("#stop1").click(function(){ $(".stop").stop(); }); }); </script>
