jQuery效果-滑动

index.html

 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="myjs3.js"></script>
 8    <style>
 9       #content,#flipshow,#fliphide,#fliptoggle{
10          padding:5px;
11          text-align:center;
12          background-color: #ece023;
13          border:solid 1px #ece999;
14       }
15       #content{
16          padding:50px;
17          display:none;
18       }
19    </style>
20 </head>
21 <body>
22     
23     <div id="flipshow">出现</div><!-- 点击滑动出现 -->
24     <div id="fliphide">隐藏</div><!-- 点击滑动隐藏 -->
25     <div id="fliptoggle">隐藏/出现</div><!-- 点击滑动隐藏/出现 -->
26     <div id="content">Hello world</div>
27     
28 </body>
29 </html>

 

js代码：

 1 $(document).ready(function(){
 2     $("#flipshow").click(function(){//点击滑动出现
 3         $("#content").slideDown(1000);
 4     });
 5     
 6     $("#fliphide").click(function(){//点击滑动隐藏
 7         $("#content").slideUp(1000);
 8     });
 9     
10     $("#fliptoggle").click(function(){//点击滑动隐藏/出现
11         $("#content").slideToggle(1000);
12     });
13 });

 

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