<!DOCTYPE html> 
<html> 

  <head> 
	<title> 
		jQuery | fadeOut() افکت 
	</title> 

	<script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
	</script> 
</head> 

<body style = "text-align:center;"> 

	<h1 style = "color:green;" > 
		Farazgar 
	</h1> 
	
	<h2>jQuery | fadeOut() افکت</h2> 

	<button class="btn1">Fade out</button> 

	<button class="btn2">Fade in</button> 
	
	<!-- Script to display fadeIn and fadeOut effect -->
	<script> 
		$(document).ready(function(){ 
			$(".btn1").click(function(){ 
				$("h2").fadeOut() 
			}); 
			
			$(".btn2").click(function(){ 
				$("h2").fadeIn(); 
			}); 
		}); 
	</script> 
</body> 

</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.