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>
