In this article, we will explain How to Create Fading Method using jQuery. Some fade Methods are;-

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

fadeIn() Example:-

<html>
<head>
<title>fadeIn() Method</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>
</head>
<body>
<button>Click for fade in boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

fadeOut() Example:-

<html>
<head>
<title>fadeOut() Method</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
</script>
</head>
<body>
<button>Click for fade out boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:ink;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:yellow;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

fadeToggle() Example:-

<html>
<head>
<title>fadeToggle() Method</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });
});
</script>
</head>
<body>
<button>Click for fade in/out boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:blue;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:yellow;"></div>
</body>
</html>

Jquery fadeTo() Example:-

<html>
<head>
<title>fadeTo() Method</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow", 0.15);
    $("#div2").fadeTo("slow", 0.4);
    $("#div3").fadeTo("slow", 0.7);
  });
});
</script>
</head>
<body>
<button>Click for fade boxes</button><br>
<div id="div1" style="width:120px;height:80px;background-color:orange;"></div><br>
<div id="div2" style="width:120px;height:80px;background-color:gray;"></div><br>
<div id="div3" style="width:120px;height:80px;background-color:red;"></div>
</body>
</html>