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