jQuery Animation fadeTo() Method; Now, you will learn how to use this method with HTML elements.
This tutorial is going to show you what is jQuery fade to animation effect with simple example of how to use FadeTo Effect animation. And you will learn how to use fadeTo on selected html elements.
jQuery fadeTo Animation Effect with Example
jQuery fadeTo() is a method in the jQuery library that allows you to animate the opacity of selected elements over a specified duration. This method provides a smooth transition between two opacity levels, creating a fading effect. The fading effect can be used to make elements gradually appear or disappear on a web page.
Syntax
$(selector).fadeTo();
$(selector).fadeTo(speed, callback);
$(selector).fadeTo(speed, easing, callback);
Parameters of fadeTo method
- speed :- The argument ‘speed‘ determines the duration of this effect.
- easing :- It specifies the easing function to be used for transition.
- callback :- Ihis is an optional parameter. you can specify what to do after the fadeTo() method is called.
jQuery fadeTo() example
In the below example you can see that fadeTo() method effect.
<!DOCTYPE html>
<html>
<head>
<title>jQuery FadeTo Method</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#first").fadeTo("slow",0.5);
$("#second").fadeTo("slow",0.6);
$("#third").fadeTo("slow",0.7);
});
});
</script>
</head>
<body>
<p>You can ee the fadeTo() method</p>
<button>Click here for fade to</button><br><br>
<div id="first" style="width:100px;height:100px;background-color:yellow;"></div><br>
<div id="second" style="width:100px;height:100px;background-color:red;"></div><br>
<div id="third" style="width:100px;height:100px;background-color:green;"></div>
</body>
</html>
In this above example of fadeTo() method, you can see that fadeTo() effect on html elements.
fadeTo() and callback example
<!DOCTYPE html>
<html>
<head>
<title>jQuery FadeTo Method</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#first").fadeTo("slow",0.5);
$("#second").fadeTo("slow",0.6);
$("#third").fadeTo(3000,0.7,function(){
alert("The fade-to effect is completed.");
});
});
});
</script>
</head>
<body>
<p>You can ee the fadeTo() method</p>
<button>Click here for fade to</button><br><br>
<div id="first" style="width:100px;height:100px;background-color:yellow;"></div><br>
<div id="second" style="width:100px;height:100px;background-color:red;"></div><br>
<div id="third" style="width:100px;height:100px;background-color:green;"></div>
</body>
</html>
In this above example of fadeTo() method with callback, you can see that fadeTo() effect on html elements.
