fadeIn():通过将它们淡入淡出来显示匹配的元素。
<!DOCTYPE HTML><html lang="en"><head><meta charset="utf-8"><title>fadeIn demo</title><style>p {position: relative;width: 400px;height: 90px;}div {position: absolute;width: 400px;height: 65px;font-size: 36px;text-align: center;color: yellow;background: red;padding-top: 25px;top: 0;left: 0;display: none;}span {display: none;}</style><script src="/jquery-1.10.2.js"></script></head><body><p>Let it be known that the party of the first partand the party of the second part are henceforthand hereto directed to assess the allegationsfor factual correctness... (<a href="#">click!</a>)<div><span>CENSORED!</span></div></p><script>$( "a" ).click(function() {$( "div" ).fadeIn( 3000, function() {$( "span" ).fadeIn( 100 );});return false;});</script></body></html>
fadeOut:通过将它们淡化为透明来隐藏匹配的元素。
<!DOCTYPE HTML><html lang="en"><head><meta charset="utf-8"><title>fadeOut demo</title><style>.box,button {float: left;margin: 5px 10px 5px 0;}.box {height: 80px;width: 80px;background: #090;}#log {clear: left;}</style><script src="/jquery-1.10.2.js"></script></head><body><button id="btn1">fade out</button><button id="btn2">show</button><div id="log"></div><div id="box1" class="box">linear</div><div id="box2" class="box">swing</div><script>$( "#btn1" ).click(function() {function complete() {$( "<div>" ).text( this.id ).appendTo( "#log" );}$( "#box1" ).fadeOut( 1600, "linear", complete );$( "#box2" ).fadeOut( 1600, complete );});$( "#btn2" ).click(function() {$( "div" ).show();$( "#log" ).empty();});</script></body></html>
fadeTo：调整匹配元素的不透明度。
<!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="/jquery-1.10.2.js"></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>
fadeToggle：通过动画化不透明度来显示或隐藏匹配的元素。
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>fadeToggle demo</title><script src="/jquery-1.10.2.js"></script></head><body><button>fadeToggle p1</button><button>fadeToggle p2</button><p>This paragraph has a slow, linear fade.</p><p>This paragraph has a fast animation.</p><div id="log"></div><script>$( "button:first" ).click(function() {$( "p:first" ).fadeToggle( "slow", "linear" );});$( "button:last" ).click(function() {$( "p:last" ).fadeToggle( "fast", function() {$( "#log" ).append( "<div>finished</div>" );});});</script></body></html>
