Let us understand with a suitable example:-
fadeIn_fadeOut.html:-
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/fadein_fadeout.js"></script>
</head>
<body>
<p>Demonstrating fadeIn functionality.</p>
<button id="btn1">Click to fade in the box</button>
<br><br>
<div id="div1" style="width:100px;height:100px;display:none;background-color:red;">
</div><br>
<p>Demonstrating fadeOut functionality.</p>
<button id="btn2">Click to fade out the box</button>
</body>
</html>
$(document).ready(function(){
$("#btn1").click(function(){
$("#div1").fadeIn("slow");
});
$("#btn2").click(function(){
$("#div1").fadeOut("slow");
});
});
Screenshots:-
fadeIn_fadeOut.html:-
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/fadein_fadeout.js"></script>
</head>
<body>
<p>Demonstrating fadeIn functionality.</p>
<button id="btn1">Click to fade in the box</button>
<br><br>
<div id="div1" style="width:100px;height:100px;display:none;background-color:red;">
</div><br>
<p>Demonstrating fadeOut functionality.</p>
<button id="btn2">Click to fade out the box</button>
</body>
</html>
fadein_fadeout.js:-
$(document).ready(function(){
$("#btn1").click(function(){
$("#div1").fadeIn("slow");
});
$("#btn2").click(function(){
$("#div1").fadeOut("slow");
});
});
Screenshots:-
Explanation:-
Here, fadeIn() and fadeOut() methods has been used. fadeIn() method changes the opacity from hidden to visible whereas fadeOut() method changes the opacity from visible to hidden. Both the methods are built-in functions which are used in Jquery.
