.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. }); });
With 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>