本文实现一个控制出现、消失、透明度的效果
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="width:80px;display:none;height:80px;background-color: aqua"></div> 15 <div id="div2" style="width:80px;display:none;height:80px;background-color: #ece023"></div> 16 <div id="div3" style="width: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 });
时间： 2024-08-25 01:22:00