JQuery – fadeOut() Method


What is jquery fadeOut() method ?

JQuery inbuilt fadeOut() method is used to change the visiblity from visible to hidden for selected elements.

What is the syntax of fadeOut() ?

$(selector).fadeOut(speed,easing,callback)

selector – this is the html element.

fadeOut() – inbuilt jquery method

There are 3 optional params for fadeOut() method.

1. speed

2. easing

3. callback

1. speed

        This defines the speed of the show element.

        By default this will be 400 milliseconds.

Possible values are “milliseconds”,”slow”,”fast”.

2. easing

        This defines the speed of the element at different point of animation.


By dafault the value is “swing”.

Possible values are “swing” and “linear”.

3. callback


        This defines the call back function to be executed after show operation.

Jquery tutorial for beginners !!!

Click to Learn More about – online learn jquery

1. Fading out P2,P3 and P4

Example :

<!DOCTYPE html>
<html>

	<head>
		<title>Our title</title>
		<style>
		#dId-1{
			width: 30%;
			height: 30%;
			text-align:center;
			padding: 20px;
			margin: 10px;
			border: 2px solid green;
			font-size: 20px;
		}
		#dId-2{
			width: 30%;
			height: 30%;
			text-align:center;
			margin: 10px;
			border: 2px solid green;
			padding: 20px;
			font-size: 20px;
		}
		.b1, .b2, .b3, .b4, .b5, .s1, .s2, .s3, .s4, .s5{
			width:100px;
			height:30px;
			font-size: 20px;
		}
		</style>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
		</script>
		<script>
			$(document).ready(function(){

				$(".b1").click(function(){
					$(".p1").fadeOut();
				});
				$(".b2").click(function(){
					$(".p2").fadeOut();
                                });
				$(".b3").click(function(){
					$(".p3").fadeOut();
				});
				$(".b4").click(function(){
					$(".p4").fadeOut();
				});
				$(".b5").click(function(){
					$(".p5").fadeOut();
				});
			});
		</script>
	</head>
	<body>
		<div id="dId-1">
			<p class="p1">This is Paragraph1 P1</p>
			<p class="p2">This is Paragraph2 P2</p>
			<p class="p3">This is Paragraph3 P3</p>
			<p class="p4">This is Paragraph4 P4</p>
			<p class="p5">This is Paragraph5 P5</p>
		</div>
		<div id="dId-2">
			<p>
			<button class="b1">FadeOut</button> FadeOut P1 
			</p>
			<p>
			<button class="b2">FadeOut</button> FadeOut P2 
			</p>
			<p>
			<button class="b3">FadeOut</button> FadeOut P3 
			</p>
			<p>
			<button class="b4">FadeOut</button> FadeOut P4 
			</p>
			<p>
			<button class="b5">FadeOut</button> FadeOut P5 
			</p>
			<div>
	</body>
</html>

Output :

1. Before fadeout called.

2. after fadeout called.

2. FadeOut with callback function

Example 2 :

<!DOCTYPE html>
<html>

	<head>
		<title>Our title</title>
		<style>
		#dId-1{
			width: 30%;
			height: 30%;
			text-align:center;
			padding: 20px;
			margin: 10px;
			border: 2px solid green;
			font-size: 20px;
		}
		#dId-2{
			width: 30%;
			height: 30%;
			text-align:center;
			margin: 10px;
			border: 2px solid green;
			padding: 20px;
			font-size: 20px;
		}
		.b1, .b2, .b3, .b4, .b5, .s1, .s2, .s3, .s4, .s5{
			width:100px;
			height:30px;
			font-size: 20px;
		}
		</style>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
		</script>
		<script>
			$(document).ready(function(){

				$(".b1").click(function(){
					$(".p1").fadeOut(function(){
						alert("Fading out from visible to hidden for P1 done");
					});
				});
				$(".b2").click(function(){
					$(".p2").fadeOut(function(){
						alert("Fading out from visible to hidden for P2 done");
					});
                                });
				$(".b3").click(function(){
					$(".p3").fadeOut(function(){
						alert("Fading out from visible to hidden for P3 done");
					});
				});
				$(".b4").click(function(){
					$(".p4").fadeOut(function(){
						alert("Fading out from visible to hidden for P4 done");
					});
				});
				$(".b5").click(function(){
					$(".p5").fadeOut(function(){
						alert("Fading out from visible to hidden for P5 done");
					});
				});
			});
		</script>
	</head>
	<body>
		<div id="dId-1">
			<p class="p1">This is Paragraph1 P1</p>
			<p class="p2">This is Paragraph2 P2</p>
			<p class="p3">This is Paragraph3 P3</p>
			<p class="p4">This is Paragraph4 P4</p>
			<p class="p5">This is Paragraph5 P5</p>
		</div>
		<div id="dId-2">
			<p>
			<button class="b1">FadeOut</button> FadeOut P1 
			</p>
			<p>
			<button class="b2">FadeOut</button> FadeOut P2 
			</p>
			<p>
			<button class="b3">FadeOut</button> FadeOut P3 
			</p>
			<p>
			<button class="b4">FadeOut</button> FadeOut P4 
			</p>
			<p>
			<button class="b5">FadeOut</button> FadeOut P5 
			</p>
			<div>
	</body>
</html>

Output :