jQuery stop effect when button is pressed
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>stop demo</title> <style> div { position: absolute; background-color: #abc; left: 0px; top: 30px; width: 60px; height: 60px; margin: 5px; } </style> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> </head> <body> <button id="go">Go</button> <button id="stop">STOP!</button> <button id="back">Back</button> <div class="block"></div> <script> // Start animation $( "#go" ).click(function() { $( ".block" ).animate({ left: "+=100px" }, 2000 ); }); // Stop animation when button is clicked $( "#stop" ).click(function() { $( ".block" ).stop(); }); // Start animation in the opposite direction $( "#back" ).click(function() { $( ".block" ).animate({ left: "-=100px" }, 2000 ); }); </script> </body> </html>
