Description:
jQuery fadeTo() method is used to fading the given opacity for the matched/selected element. It is similar to the .fadeIn method but that method unhides the element and always fades to 100% opacity.
Syntax
.fadeTo( duration, opacity Ex : $(“#div”).fadeToggle(“slow”);
From the below code, fadeTo() method will apply opacity of 0.2 to the divFadeBox element. A number between 0 and 1 specifying the target opacity. After clicking the “Click to Apply Opacity using .fadeTo()” button, then the blue box will be fadein up to specified opacity (ie., 0.2) as shown below
Duration/speed
It specifies the speed of the fadein. The valuse may be slow, fast and milliseconds. (default value: 400). Duration are given in milliseconds and higher values indicate slower animations, not faster ones.
Easing
It specifies the easing function to be used for transition (default value: swing).
Callback
A function to call once the animation is complete.
Example:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#divButton").click(function () {
$("#divFadeBox").fadeTo("slow", 0.2);
});
});
</script>
</head>
<body>
<button id="divButton">Click to Apply Fadding using .fadeTo()</button><br><br>
<div id="divFadeBox" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
Output:
Before button click:
<div id="divFadeBox" style="width: 80px; height: 80px; background-color: blue;"></div>
After button click:
<div id="divFadeBox" style="width: 80px; height: 80px; background-color: blue; opacity: 0.2;"></div>
