What is jquery fadeTo() method ?
JQuery inbuilt fadeTo() method is used to change the opacity of the element gradually to a specified opacity.
This is called as fading effect.
What is the syntax of fadeTo() ?
$(selector).fadeTo(speed,opacity,easing,callback)
selector – this is the html element.
fadeTo() – inbuilt jquery method
There are 3 params for fadeTo() method.
1. speed
2. opacity
3. easing (optional)
4. callback (optional)
1. speed
This defines the speed of the show element.
By default this will be 400 milliseconds.
Possible values are “milliseconds”,”slow”,”fast”.
2. opacity
The opacity value to fadeTo().
It must be a number between 0.00 and 1.00
3. easing (optional)
This defines the speed of the element at different point of animation.
By default the value is “swing”.
Possible values are “swing” and “linear”.
4. callback (optional)
This defines the call back function to be executed after show operation.
Jquery tutorial for beginners !!!
Click to Learn More about – online learn jquery
1. FadeTo method with speed and opacity.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Our title</title>
<style>
#dId-1{
width: 30%;
height: 30%;
text-align:center;
padding: 20px;
margin: 10px;
border: 2px solid green;
font-size: 20px;
}
#dId-2{
width: 30%;
height: 30%;
text-align:center;
margin: 10px;
border: 2px solid green;
padding: 20px;
font-size: 20px;
}
.b1, .b2, .b3, .b4, .b5, .s1, .s2, .s3, .s4, .s5{
width:100px;
height:30px;
font-size: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".b1").click(function(){
$(".p1").fadeTo(1000,0.5);
});
$(".b2").click(function(){
$(".p2").fadeTo(1000,0.4);
});
$(".b3").click(function(){
$(".p3").fadeTo(1000,0.3);
});
$(".b4").click(function(){
$(".p4").fadeTo(1000,0.2);
});
$(".b5").click(function(){
$(".p5").fadeTo(1000,0.1);
});
});
</script>
</head>
<body>
<div id="dId-1">
<p class="p1">This is Paragraph1 P1</p>
<p class="p2">This is Paragraph2 P2</p>
<p class="p3">This is Paragraph3 P3</p>
<p class="p4">This is Paragraph4 P4</p>
<p class="p5">This is Paragraph5 P5</p>
</div>
<div id="dId-2">
<p>
<button class="b1">FadeTo</button> FadeTo P1
</p>
<p>
<button class="b2">FadeTo</button> FadeTo P2
</p>
<p>
<button class="b3">FadeTo</button> FadeTo P3
</p>
<p>
<button class="b4">FadeTo</button> FadeTo P4
</p>
<p>
<button class="b5">FadeTo</button> FadeTo P5
</p>
<div>
</body>
</html>
Output :
1. Before fadeTo() method is called
2. After fadeTo() method is called
2. FadeTo method speed,opacity and callback function.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Our title</title>
<style>
#dId-1{
width: 30%;
height: 30%;
text-align:center;
padding: 20px;
margin: 10px;
border: 2px solid green;
font-size: 20px;
}
#dId-2{
width: 30%;
height: 30%;
text-align:center;
margin: 10px;
border: 2px solid green;
padding: 20px;
font-size: 20px;
}
.b1, .b2, .b3, .b4, .b5, .s1, .s2, .s3, .s4, .s5{
width:100px;
height:30px;
font-size: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".b1").click(function(){
$(".p1").fadeTo(1000,0.5, function(){
alert("FadeTo function called successfully for P1");
});
});
$(".b2").click(function(){
$(".p2").fadeTo(1000,0.4, function(){
alert("FadeTo function called successfully for P2");
});
});
$(".b3").click(function(){
$(".p3").fadeTo(1000,0.3,function(){
alert("FadeTo function called successfully for P3");
});
});
$(".b4").click(function(){
$(".p4").fadeTo(1000,0.2, function(){
alert("FadeTo function called successfully for P4");
});
});
$(".b5").click(function(){
$(".p5").fadeTo(1000,0.1, function(){
alert("FadeTo function called successfully for P5");
});
});
});
</script>
</head>
<body>
<div id="dId-1">
<p class="p1">This is Paragraph1 P1</p>
<p class="p2">This is Paragraph2 P2</p>
<p class="p3">This is Paragraph3 P3</p>
<p class="p4">This is Paragraph4 P4</p>
<p class="p5">This is Paragraph5 P5</p>
</div>
<div id="dId-2">
<p>
<button class="b1">FadeTo</button> FadeTo P1
</p>
<p>
<button class="b2">FadeTo</button> FadeTo P2
</p>
<p>
<button class="b3">FadeTo</button> FadeTo P3
</p>
<p>
<button class="b4">FadeTo</button> FadeTo P4
</p>
<p>
<button class="b5">FadeTo</button> FadeTo P5
</p>
<div>
</body>
</html>
Output :
