How to Create Fading Method using jQuery

How to Create Fading Method using jQuery

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>