jQuery效果-淡入淡出

本文实现一个控制出现、消失、透明度的效果

 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 });

 

posted @ 2016-08-11 19:19  UniqueColor  阅读(514)  评论(0)  编辑  收藏  举报