本文实现一个控制出现、消失、透明度的效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script src="jquery-3.1.0.min.js"></script> 7 <script src="myjs2.js"></script> 8 </head> 9 <body> 10 <button id="in">fadeIn</button><!-- 慢慢出现动画 --> 11 <button id="out">fadeOut</button><!-- 慢慢消失动画 --> 12 <button id="toggle">fadeToggle</button><!-- 一个按钮直接控制出现/消失动画 --> 13 <button id="to">fadeTo</button><!-- 透明度效果 --> 14 <div id="div1" style="80px;display:none;height:80px;background-color: aqua"></div> 15 <div id="div2" style="80px;display:none;height:80px;background-color: #ece023"></div> 16 <div id="div3" style="80px;display:none;height:80px;background-color: darkgoldenrod"></div> 17 18 </body> 19 </html>
js：
1 $(document).ready(function(){ 2 $("#in").on("click",function(){ 3 $("#div1").fadeIn(1000);//fadeIn慢慢出现 4 $("#div2").fadeIn(1000); 5 $("#div3").fadeIn(1000); 6 }); 7 8 $("#out").on("click",function(){ 9 $("#div1").fadeOut(1000);//fadeOut慢慢消失 10 $("#div2").fadeOut(1000); 11 $("#div3").fadeOut(1000); 12 }); 13 $("#toggle").on("click",function(){ 14 $("#div1").fadeToggle(1000);//一个按钮直接控制出现/消失动画 15 $("#div2").fadeToggle(1000); 16 $("#div3").fadeToggle(1000); 17 }); 18 $("#to").on("click",function(){ 19 $("#div1").fadeTo(1000,0.5);//透明度效果,如淡化，1表示完全不透明，0表示完全透明 20 $("#div2").fadeTo(1000,0.7); 21 $("#div3").fadeTo(1000,0.3); 22 }); 23 });