.fadeTo( duration, opacity [, complete ] )Returns: jQuery
Description: Adjust the opacity of the matched elements.
-
version added: 1.0.fadeTo( duration, opacity [, complete ] )
-
version added: 1.4.3.fadeTo( duration, opacity [, easing ] [, complete ] )
- durationA string or number determining how long the animation will run.
- opacityType: NumberA number between 0 and 1 denoting the target opacity.
- easingType: StringA string indicating which easing function to use for the transition.
- completeType: Function()A function to call once the animation is complete.
-
The .fadeTo() method animates the opacity of the matched elements. It is similar to the -fadeIn() method but that method unhides the element and always fades to 100% opacity-
Durations are given in milliseconds; higher values indicate slower animations, not faster ones- The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively- If any other string is supplied, the default duration of 400 milliseconds is used- Unlike the other effect methods, -fadeTo() requires that duration be explicitly specified-
If supplied, the callback is fired once the animation is complete- This can be useful for stringing different animations together in sequence- The callback is not sent any arguments, but this is set to the DOM element being animated- If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole-
We can animate any element, such as a simple image:
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
// With the element initially shown, we can dim it slowly:
$( "#clickme" ).click(function() {
$( "#book" ).fadeTo( "slow" , 0.5, function() {
// Animation complete.
});
}); 
fadeTo() effectWith duration set to 0, this method just changes the opacity CSS property, so .fadeTo( 0, opacity ) is the same as .css( "opacity", opacity ).
Additional Notes:
- All jQuery effects, including
.fadeTo(), can be turned off globally by settingjQuery.fx.off = true, which effectively sets the duration to 0. For more information, see jQuery-fx-off-
Examples:
Animates first paragraph to fade to an opacity of 0.33 (33%, about one third visible), completing the animation within 600 milliseconds.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeTo demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<p>
Click this paragraph to see it fade.
</p>
<p>
Compare to this one that won't fade.
</p>
<script>
$( "p:first" ).click(function() {
$( this ).fadeTo( "slow", 0.33 );
});
</script>
</body>
</html> Demo:
Fade div to a random opacity on each click, completing the animation within 200 milliseconds.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeTo demo</title>
<style>
p {
width: 80px;
margin: 0;
padding: 5px;
}
div {
width: 40px;
height: 40px;
position: absolute;
}
#one {
top: 0;
left: 0;
background: #f00;
}
#two {
top: 20px;
left: 20px;
background: #0f0;
}
#three {
top: 40px;
left:40px;
background:#00f;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<p>And this is the library that John built...</p>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<script>
$( "div" ).click(function() {
$( this ).fadeTo( "fast", Math.random() );
});
</script>
</body>
</html> Demo:
Find the right answer! The fade will take 250 milliseconds and change various styles when it completes.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeTo demo</title>
<style>
div, p {
width: 80px;
height: 40px;
top: 0;
margin: 0;
position: absolute;
padding-top: 8px;
}
p {
background: #fcc;
text-align: center;
}
div {
background: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<p>Wrong</p>
<div></div>
<p>Wrong</p>
<div></div>
<p>Right!</p>
<div></div>
<script>
var getPos = function( n ) {
return (Math.floor( n ) * 90) + "px";
};
$( "p" ).each(function( n ) {
var r = Math.floor( Math.random() * 3 );
var tmp = $( this ).text();
$( this ).text( $( "p:eq(" + r + ")" ).text() );
$( "p:eq(" + r + ")" ).text( tmp );
$( this ).css( "left", getPos( n ) );
});
$( "div" )
.each(function( n ) {
$( this ).css( "left", getPos( n ) );
})
.css( "cursor", "pointer" )
.click( function() {
$( this ).fadeTo( 250, 0.25, function() {
$( this )
.css( "cursor", "" )
.prev()
.css({
"font-weight": "bolder",
"font-style": "italic"
});
});
});
</script>
</body>
</html> 
