jQuery fadeOut(), fadeIn(), and fadeToggle() Functions
fadeIn() Method
The fadeIn() method gradually changes the opacity of the selected elements from hidden to visible.
$("#element").fadeIn();fadeOut() Method
The fadeOut() method gradually changes the opacity of the selected elements from visible to hidden.
$("#element").fadeOut();fadeToggle() Method
The fadeToggle() method toggles the fading effect, either fading in or fading out the selected elements based on their current visibility.
$("#element").fadeToggle();All in one Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide and Show</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$(".box").fadeOut(2000);
});
$(".btn2").click(function(){
$(".box").fadeIn(1000);
});
$(".btn3").click(function(){
$(".box").fadeToggle(500);
});
$(".btn4").click(function(){
$(".box").fadeTo("slow",0.5);
});
});
</script>
</head>
<body>
<style>
.box{
background-color: blueviolet;
width: 200px;
height: 200px;
margin:50px;
}
</style>
<div class="box"></div>
<button class="btn1">Fade Out</button>
<button class="btn2">Fade In</button>
<button class="btn3">Fade Toggle</button>
<button class="btn4">Fade To</button>
</body>
</html>