隐藏与显示
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="myjs.js"></script> 8 </head> 9 <body> 10 <p>hello</p> 11 <button id="hide">隐藏</button> 12 <button id="show">显示</button> 13 </body> 14 </html>
myjs.js
1 $(document).ready(function(){ 2 $("#hide").click(function(){ 3 $("p").hide(1000);//点击按钮后1秒隐藏 4 }); 5 $("#show").click(function(){ 6 $("p").show(1000);//点击按钮后1秒显示 7 }); 8 });
通过上面的代码实现了两个按钮来分别控制p元素的隐藏和显示，控制了时间为1秒，视觉效果比较好
但是大部分的隐藏和显示其实是1个按钮来控制的，如音乐播放器的开始/暂停，所以接下来是一个按钮的效果
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="myjs.js"></script> 8 </head> 9 <body> 10 <p>hello</p> 11 <button id="toggle">隐藏/显示</button> 12 </body> 13 </html>
myjs.js
$(document).ready(function(){ $("#toggle").click(function(){ $("p").toggle(1000); }); });
最后来实现这样的一个效果：屏幕上有5个正方形的黄色块状，当点击任意一块时，这块会产生隐藏的缓慢3D动画效果，效果比较好看
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 8 <link href="style1.css" rel="stylesheet" type="text/css"> 9 </head> 10 <body> 11 <script> 12 for(var i=0;i<5;i++){ 13 $("<div>").appendTo(document.body); 14 } 15 $("div").click(function(){ 16 $(this).hide(2000,function(){ 17 $(this).remove(); 18 }); 19 }); 20 </script> 21 </body> 22 </html>
css代码：
1 div{ 2 background:#ece023; 3 50px; 4 height:50px; 5 margin:2px; 6 float:left; 7 }