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