<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Stop Currently Running Animations</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <style> img{ position: relative; /* Required to move element */ } </style> <script> $(document).ready(function(){ // Start animation $(".start").click(function(){ $("img").animate({left: "+=150px"}, 2000); }); // Stop running animation $(".stop").click(function(){ $("img").stop(); }); // Start animation in the opposite direction $(".back").click(function(){ $("img").animate({left: "-=150px"}, 2000); }); // Reset to default $(".reset").click(function(){ $("img").animate({left: "0"}, "fast"); }); }); </script> </head> <body> <button type="button" class="start">Start</button> <button type="button" class="stop">Stop</button> <button type="button" class="back">Back</button> <button type="button" class="reset">Reset</button> <p> <img src="examples/resources/dog.jpg" alt="dog"> </p> </body> </html>