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="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     width:50px;
4     height:50px;
5     margin:2px;
6     float:left;
7 }

 

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