jQuery fadeOut()

The jQuery fadeOut() method is one of the fading effects facilitated by jQuery which is used to fade the selected elements out of visibility.

Example:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$("button").click(function(){
    	$("#div1").fadeOut();
	});
});
</script>
</head>
<body>
 
<p>Knock Knock. Click to let me go Out.</p>
<button>FadeOut</button><br><br>
 
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
 
</body>
</html>

Try it

JS Bin on jsbin.com

 

Parameters like speed and callback can also be used in fadeOut() method of jQuery fading effect. All these parameters are optional, and are not necessary parameters.

Syntax:

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

Speed:

  • Speed is an optional parameter that specifies the speed of the delay in the animation (fading out of the selected element), with a default value of 400 milliseconds, fast value of 200 milliseconds and slow value of 600 milliseconds.
  • This parameter can also accept a value directly in milliseconds.

Callback:

  • Callback is the optional function to be executed once the fadeOut() method’s execution is complete.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$("button").click(function(){
    	$("#div1").fadeOut();
    	$("#div2").fadeOut("slow");
    	$("#div3").fadeOut(3000);
	});
});
</script>
</head>
<body>
 
<p>Knock Knock. Click to let me go Out.</p>
<button>FadeOut</button><br><br>
 
<div id="div1" style="width:80px;height:80px;background-color:red;border-radius: 70px"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;border-radius: 70px"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;border-radius: 70px"></div>
</body>
</html>

Try it

JS Bin on jsbin.com

Please Share