The Tech Platform
Jun 25, 20211 min
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.
<!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>
Run the Code to see the result
<!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>
Run the code to see the result