fadein() Method in jQuery, jQuery fadein() Method with Example

<!DOCTYPE html>
<html>
	<head>
    	<title>jQuery fadein() 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(){
				$("button").click(function(){
					$("#div1").fadeIn();
					$("#div2").fadeIn("slow");
					$("#div3").fadeIn(3000);
				});
			});
		</script>
		<style type="text/css">
			.button{ padding:6px 15px;}
			.circle_1{
				width:80px;
				height:80px;
				display:none;
				background-color:#F90;
				margin:5px; 
				border-radius:100px;
			}
			.circle_2{
				width:80px;
				height:80px;
				display:none;
				background-color:#0099da; 
				margin:5px; 
				border-radius:100px;
			}
			.circle_3{
				width:80px;
				height:80px;
				display:none;
				background-color:#FF0; 
				margin:5px; 
				border-radius:100px;
			}
		</style>
    </head>
    <body>
	
		<button class="button">Click Here!</button>
		<div id="div1" class="circle_1"></div>
		<div id="div2" class="circle_2"></div>
		<div id="div3" class="circle_3"></div>
	
    </body>
</html>

Output :

Topic : fadein() Method