jQuery fadeTo effect Example

HTML

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

CSS

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

Javascript

$('button').click(function(){
	$('.normal').fadeTo('slow', 0.7);
	$('.slow').fadeTo(400, 0.4);
	$('.two000').fadeTo(2000, 0.2);
});
 