JQuery Fading Effect : FadeIn() and FadeOut().

Updated: Mar 14, 2023

The JQuery Fading Effect method is to display or hide the HTML elements by increasing or decreasing their opacity. The Duration is specified by using one of the predefined string 'Slow' or 'Fast' or 'Milliseconds'. Higher the value slower the animation.

FadeIn():

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn(1000);
    $("#div2").fadeIn(2000);
    $("#div3").fadeIn(3000);
  });
});
</script>
</head>
<body>

<p>fadeIn()</p>

<button>Click here to fade in boxes</button><br><br>

<div id="div1" style="width:100px;height:80px;display:none;background-color:yellow;"></div><br>
<div id="div2" style="width:100px;height:80px;display:none;background-color:pink;"></div><br>
<div id="div3" style="width:100px;height:80px;display:none;background-color:orange;"></div>

</body>
</html>

Output:

Run the Code to see the result

FadeOut();

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut(1000);
    $("#div2").fadeOut(2000);
    $("#div3").fadeOut(3500);
  });
});
</script>
</head>
<body>

<p>fadeOut()</p>

<button>Click here to fade out boxes</button><br><br>

<div id="div1" style="width:100px;height:80px;background-color:yellow;"></div><br>
<div id="div2" style="width:100px;height:80px;background-color:pink;"></div><br>
<div id="div3" style="width:100px;height:80px;background-color:orange;"></div>

</body>
</html>