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>Output:
Run the code to see the result
Resource: Wikipedia , W3School
The Tech Platform