fadeTo() Effect in Jquery

Thiyagu

8 years ago

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

[, complete ] )

Ex : $(“#div”).fadeToggle(“slow”);

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:

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.

<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>

<html>

<head>

$(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>

</body>

</html>

Output:

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

Before button click:

<div id="divFadeBox" style="width: 80px; height: 80px; background-color: blue;"></div>

1	<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>

1	<div id="divFadeBox" style="width: 80px; height: 80px; background-color: blue; opacity: 0.2;"></div>