stop() method in jQuery, jQuery stop() method with Example

<!DOCTYPE html>
<html>
	<head>
    	<title>jQuery stop() method</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				// Start animation
				$(".start-btn").click(function(){
				  $("img").animate({left: "+=200px"}, 2000);
				});
				// Stop running animation
				$(".stop-btn").click(function(){
				  $("img").stop();
				});
			   
				// Start animation in the opposite direction
				$(".back-btn").click(function(){
				  $("img").animate({left: "-=200px"}, 2000);
				});
				// Reset to default
				$(".reset-btn").click(function(){
				  $("img").animate({left: "0"}, "fast");
				});
			});
		</script>
			 
		<style type="text/css"> 
			.btn{ padding:6px 12px; margin:5px 0px;}
			img{position: relative;}
		</style>
    </head>
    <body>
	
	<button type="button" class="start-btn btn">Start</button>
    <button type="button" class="stop-btn btn">Stop</button>
    <button type="button" class="back-btn btn">Back</button>
    <button type="button" class="reset-btn btn">Reset</button>
    
    <p><img src="../images/Free-Time-Learning.png" alt="Free Time Learning"></p>
	
    </body>
</html>

Output :

Topic : stop() method