Updated March 23, 2023
Introduction to jQuery fadeTo()
In this article, we will discuss one of the jQuery effect methods whose purpose is to set or adjust the opacity of the HTML elements. jQuery fadeTo() method is basically used to gradually adjust the opacity of the selected elements to a specified level. This is one of the fade methods provided by jQuery for fading in and out of visibility. Some of the fade methods provided by jQuery are:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
jQuery fadeTo() method animates the opacity of the matched elements, values being in between 0 and 1. This method requires the duration to be specified explicitly but this is not mandatory with other effective methods. This effect can be turned off globally by setting fx.off = true, just like other jQuery effects. This sets the duration to 0.
Syntax:
$(selector).fadeTo(speed, opacity, easing, callback)where,
- selector: Refers to the selected element.
- speed: It is a mandatory parameter that specifies the speed of the fading effect. Possible values it can take are milliseconds or string values “slow” and “fast”.
- opacity: It is also a mandatory parameter that specifies the opacity, the value being in between 0 and 1.
- easing: It is an optional parameter that specifies if the animation speed is linear or swing at different animation points.
- callback: It is an optional parameter that specifies a function to be executed after the fadeTo effect is complete.
Examples to Implement jQuery fadeTo() Method
After having a brief overview of the fadeTo() method, let us take a look at a few examples which illustrate the fadeTo effect.
Example #1
Below is a simple example that illustrates the effect of the fadeTo() method in jQuery.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Example for jQuery fadeTo()</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("#p1").click(function() {
$(this).fadeTo("slow", 0.1);
});
$("#p2").click(function() {
$(this).fadeTo("slow", 0.5);
});
$("#p3").click(function() {
$(this).fadeTo("slow", 0.8);
});
});
</script>
<style>
div {
width: 400px;
height: 300px;
padding: 20px;
font-size: medium;
text-align: center;
margin: auto
margin: auto;
font-weight: bold;
border: 3px solid teal;
margin-top: 50px;
margin-bottom: 10px;
}
p {
color: brown;
font-weight: bold;
font-size: larger;
border: none;
margin: auto;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<h2>
<b>jQuery fadeTo() example</b>
</h2>
<br />
<p id="p1">
This paragraph will fade out slowly
</p>
<br /><br />
<p id="p2">
This paragraph will fade out a little slower.
</p>
<br /><br />
<p id="p3">
This paragraph will fade out the slowest.
</p>
</div>
</body>
</html>Output:
- Below is the screenshot captured when the page is initially loaded in the browser.
- No activity has been performed until now.
- We have adjusted the opacity of each paragraph in this example with different values using fadeTo().
- As you click on paragraphs, each one of them will change their opacity to the specified level.
- Paragraph having higher opacity value is more visible than the paragraph having lower opacity as shown in the below screenshot.
Example #2
Let us now consider an example for fadeTo() method with speed and a callback function.
Code:
<html>
<head>
<title>Example for jQuery fadeTo()</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").fadeTo(2000, 0.2, function() {
alert("The fadeTo effect is complete!");
});
});
});
</script>
<style>
div {
width: 400px;
height: 300px;
padding: 20px;
font-size: medium;
text-align: center;
margin: auto;
font-weight: bold;
border: 3px solid teal;
margin-top: 50px;
margin-bottom: 10px;
}
p {
color: brown;
font-weight: bold;
font-size: larger;
border: none;
margin: auto;
cursor: pointer;
}
button {
background: teal;
color: yellow;
border-radius: 30px;
padding: 15px;
font-weight: bold;
border: none;
margin: auto;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<h2>
<b>jQuery fadeTo() example</b>
</h2>
<br />
<p>This paragraph will fade out on button click.</p>
<br /><br />
<button>Click me</button>
</div>
</body>
</html>Output:
- The below screenshot shows the screen when the page is initially loaded in the browser.
- This example is similar to the one shown above.
- The only difference is that we have added a callback function as a parameter to the fadeTo() method.
- An alert is set using the callback function which gets executed once the fadeTo effect is complete.
- As shown in the screenshot, once the button is clicked, the opacity of the selected paragraph changes and then an alert box pops up once the effect is complete.
Example #3
This example illustrates the fading effects and the ways various fading methods work.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Example for jQuery fading effect</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$(".btn_fadeout").click(function() {
$("p").fadeOut();
});
$(".btn_fadein").click(function() {
$("p").fadeIn();
});
$(".btn_fadeto").click(function() {
$("p").fadeTo("fast", 0.6);
});
});
</script>
<style>
p {
color: brown;
font-weight: bold;
font-size: larger;
border: none;
margin: auto;
cursor: pointer;
}
div {
width: 450px;
height: 300px;
padding: 20px;
font-size: medium;
text-align: center;
margin: auto;
font-weight: bold;
border: 3px solid teal;
margin-top: 50px;
margin-bottom: 10px;
}
button {
background: teal;
color: yellow;
border-radius: 30px;
padding: 15px;
font-weight: bold;
border: none;
margin: auto;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<h2>Fading effects</h2>
<br />
<p>This paragraph will show the fading effects on button clicks.</p>
<br /><br /><br />
<button class="btn_fadeout">Fade out</button>
<button class="btn_fadein">Fade in</button>
<button class="btn_fadeto">Fade To</button>
<h4>Click on above buttons to fade out and fade in text.</h4>
</div>
</body>
</html>Output:
- Below is the screenshot captured when the page is initially loaded in the browser.
- No activity has been performed until now.
- As the three buttons are clicked, fadeOut(), fadeIn()and fadeTo() methods are implemented.
- On clicking the Fade out button, the selected paragraph will completely fade out as shown below.
- On clicking Fade in button, the selected paragraph will completely fade in.
- On clicking Fade To button, the selected paragraph will fade to the specified value as shown below.
Conclusion
- This jQuery article demonstrated the effects and ways of implementing the jQuery fadeTo() method.
- jQuery fadeTo()method is an inbuilt jQuery fading effect method that animates the HTML elements to the specified opacity.
- There are similar other such methods that implement the fading effect in jQuery.
- These fading effects add animation and visual effects to the web pages to make them more interactive.
- This method can also be used to make jQuery set opacity as a CSS property by setting the speed to 0.
Recommended Articles
This is a guide to jQuery fadeTo(). Here we discuss the basic concept and different examples of jQuery fadeTo() along with code implementation. You may also look at the following articles to learn more –
