jQuery fadeIn effect example

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery fadeIn() effect Example</title>
</head>
<body>
	<h1>jQuery fadeIn() effect Example</h1>
	<button type="button">Start</button>
	<div class="normal">
		<p>This is normal fadeIn effect</p>
	</div>
	<div class="slow">
		<p>This is slow fadeIn effect</p>
	</div>
	<div class="one000">
		<p>This is 1000 fadeIn effect</p>
	</div>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>
 

CSS

div	{
	width: 500px;
	display: none;
}
.normal {
	background-color: red;
	font-size: 22px;
}
.slow {
	background-color: blue;
	font-size: 22px;
}
.one000 {
	background-color: green;
	font-size: 22px;
}

Javascript

$('button').click(function(){
	$('.normal').fadeIn();
	$('.slow').fadeIn('slow');
	$('.one000').fadeIn(1000, function() {
            alert('fadeIn effect completed.');
        });
});