jQuery fadeToggle effect Example

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery fadeToggle() effect Example</title>
</head>
<body>
	<h1>jQuery fadeToggle() effect Example</h1>
	<button type="button">Start</button>
	<div class="normal">
		<p>This is normal fadeToggle effect</p>
	</div>
	<div class="slow">
		<p>This is slow fadeToggle effect</p>
	</div>
	<div class="two000">
		<p>This is 2000 fadeToggle 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;
	display: none;
}

Javascript

$('button').click(function(){
	$('.normal').fadeToggle();
	$('.slow').fadeToggle('slow');
	$('.two000').fadeToggle(2000, function() {
            alert('fadeToggle effect completed.');
        });
});