Click the Go button once to start the animation, then click the STOP button to stop it where it's currently positioned. Another option is to click several buttons to queue them up and see that stop just kills the currently playing one.

Edit code and click me	Your Result (Some examples do not work in Google Chrome):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ // 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> <style>div { position: absolute; background-color: #abc; left: 0px; top:30px; width: 60px; height: 60px; margin: 5px; } </style> </head> <body> <button id="go">Go</button> <button id="stop">STOP!</button> <button id="back">Back</button> <div class="block"></div> </body> </html>
Edit the code above and click to see the result	www.xhtml.co.il - Try it yourself