Through the Fade Effect you can fade any element to the fade technology.You can hide and show the visibility of a Yankee element.
Fade Effect also has many types of effects:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
fadeIn():-
Through this method, you can slowly show hidden elements.In jQuery, this element is defined by fadeIn ().
syntax:-
$(selector).fadeIn(speed,callback);
Example:-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>fadeIn() with Experts PHP.</p>
<button>Click to fade in boxes</button><br><br>
<div id="div1" style="width100px;height:100px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:100px;height:100px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:100px;height:100px;display:none;background-color:blue;"></div>
</body>
</html>
fadeOut():-
Through the fadeOut method you can fade out visible elements.You can hide a visible element.In jQuery, this element is defined by fadeOut().
syntax:-
$(selector).fadeOut(speed,callback);
Example:-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>fadeOut() with Experts PHP.</p>
<button>Click to fade out boxes</button><br><br>
<div id="div1" style="width:100px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:100px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:100px;height:80px;background-color:blue;"></div>
</body>
</html>
fadeToggle()
Through this method you can perform both fadeIn() and fadeOut() with the same button.This means that if the element is fadeOut, it can be fadeIn() via fadeToggle().And if the element is fadeIn, it can be fadeOut via fadeToggle().In jQuery this method is defined by fadeToggle().
Syntax:-
$(selector).fadeToggle(speed,callback);
Example;-
<!DOCTYPE html>
<html>
<head>
<title>jQuery FadeToggle Effect Method </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#demo1").fadeToggle();
$("#demo2").fadeToggle("slow");
$("#demo3").fadeToggle(1000);
$("#demo4").fadeToggle(2000);
});
});
</script>
</head>
<body>
<button>Click Here</button><br>
<div id="demo1" style="width: 100px; height: 100px; background-color: pink;" ></div>
<div id="demo2" style="width: 100px; height: 100px; background-color: orange;" ></div>
<div id="demo3" style="width: 100px; height: 100px; background-color: blue;" ></div>
<div id="demo4" style="width: 100px; height: 100px; background-color: red;" ></div>
</body>
</html>
Through the fadeTo method you can define the Opacity of the color.Opacity is always from 0 to 1.In jQuery this method is defined by fadeTo().
Syntax:-
$(selector).fadeTo(speed, opacity);
Example:-
<!DOCTYPE html>
<html>
<head>
<title>jQuery FadeTo Effect Method </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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 Here</button><br>
<div id="demo1" style="width: 100px; height: 100px; background-color: pink;" ></div>
<div id="demo2" style="width: 100px; height: 100px; background-color: orange;" ></div>
<div id="demo3" style="width: 100px; height: 100px; background-color: blue;" ></div>
</body>
</html>