<!DOCTYPE html> 
<html> 

<head> 
	<title>jQuery stop() افکت</title> 
	
	<script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script> 
	
	<style> 
		#panel, 
		#flip { 
			padding: 5px; 
			font-size: 18px; 
			text-align: center; 
			background-color: green; 
			color: white; 
			border: solid 1px #666; 
			border-radius: 3px; 
		} 
		
		#panel { 
			padding: 50px; 
			display: none; 
		} 
	</style> 
</head> 

<body> 
	<center> 
		<h1 style="color:green;"> 
		Farazgar</h1> 
		<h2 id="Farazgar"> jQuery stop() افکت</h2> 
		<br> 
		<button id="start">Start</button> 
		<button id="stop">Stop</button> 
		<br> 
		<br> 
		<div style="background:green; 
					height:100px; 
					width:400px; 
					position:absolute;"> 
		Farazgar 
	</div> 
		<script> 
			$(document).ready(function() { 
				$("#start").click(function() { 
					$("div").animate({ 
						left: '80px' 
					}, 5000); 
					$("div").animate({ 
						fontSize: '3em' 
					}, 5000); 
				}); 

				$("#stop").click(function() { 
					$("div").stop(); 
				}); 
			}); 
		</script> 
	</center> 
</body> 

</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.