在jQuery中的一些特效中，可以通过四个方法来实现元素的淡入淡出，这四个方法分别是：fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo()，下面为分别为大家介绍各个方式的使用。
jQuery fadeIn() 用于淡入已经被隐藏的元素，例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jquery淡入</title> 6 <style> 7 *{margin:0;padding:0;} 8 div{width:50px;height:50px;margin:10px;display:none;} 9 #div1{background: green;} 10 #div2{background: orange;} 11 #div3{background: yellow;} 12 </style> 13 <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js --> 14 <script type="text/javascript" src="jquery-1.12.0.min.js"></script> 15 <script type="text/javascript"> 16 $(document).ready(function(){ 17 $("button").click(function(){ 18 $("#div1").fadeIn(); 19 $("#div2").fadeIn(1000); 20 $("#div3").fadeIn("slow"); 21 }); 22 }); 23 </script> 24 </head> 25 <body> 26 <p>实例演示了 fadeIn()不同参数的效果。</p> 27 <button>点击淡入 div 元素。</button> 28 <div id="div1"></div> 29 <div id="div2"></div> 30 <div id="div3"></div> 31 </body> 32 </html>
jQuery fadeOut() 用于淡入已经被隐藏的元素，例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jquery淡出</title> 6 <style> 7 *{margin:0;padding:0;} 8 div{width:50px;height:50px;margin:10px;} 9 #div1{background: green;} 10 #div2{background: orange;} 11 #div3{background: yellow;} 12 </style> 13 <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js --> 14 <script type="text/javascript" src="jquery-1.12.0.min.js"></script> 15 <script type="text/javascript"> 16 $(document).ready(function(){ 17 $("button").click(function(){ 18 $("#div1").fadeOut(); 19 $("#div2").fadeOut(1000); 20 $("#div3").fadeOut("slow"); 21 }); 22 }); 23 </script> 24 </head> 25 <body> 26 <p>实例演示了 fadeIn()不同参数的效果。</p> 27 <button>点击淡出 div 元素。</button> 28 <div id="div1"></div> 29 <div id="div2"></div> 30 <div id="div3"></div> 31 </body> 32 </html>
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>fadeToggle()切换</title> 6 <style> 7 *{margin:0;padding:0;} 8 div{width:50px;height:50px;margin:10px;} 9 #div1{background: green;} 10 #div2{background: orange;} 11 #div3{background: yellow;} 12 </style> 13 <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js --> 14 <script type="text/javascript" src="jquery-1.12.0.min.js"></script> 15 <script type="text/javascript"> 16 $(document).ready(function(){ 17 $("button").click(function(){ 18 $("#div1").fadeToggle(); 19 $("#div2").fadeToggle(1000); 20 $("#div3").fadeToggle("slow"); 21 }); 22 }); 23 </script> 24 </head> 25 <body> 26 <p>实例演示了 fadeToggle() 不同参数的效果。</p> 27 <button>点击切换 div 元素。</button> 28 <div id="div1"></div> 29 <div id="div2"></div> 30 <div id="div3"></div> 31 </body> 32 </html>
jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>fadeTo透明度</title> 6 <style> 7 *{margin:0;padding:0;} 8 div{width:50px;height:50px;margin:10px;} 9 #div1{background: green;} 10 #div2{background: orange;} 11 #div3{background: yellow;} 12 </style> 13 <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js --> 14 <script type="text/javascript" src="jquery-1.12.0.min.js"></script> 15 <script type="text/javascript"> 16 $(document).ready(function(){ 17 $("button").click(function(){ 18 $("#div1").fadeTo("slow",0.15); 19 $("#div2").fadeTo("slow",0.4); 20 $("#div3").fadeTo("slow",0.7); 21 }); 22 }); 23 </script> 24 </head> 25 <body> 26 <p>实例演示了 fadeTo不同参数的效果。</p> 27 <button>点击fadeTo透明度 div 元素。</button> 28 <div id="div1"></div> 29 <div id="div2"></div> 30 <div id="div3"></div> 31 </body> 32 </html>