jQuery效果---隐藏与显示

时间：2023-03-09 23:25:14
jQuery效果---隐藏与显示

隐藏与显示

index.html

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

    <script src="jquery-3.1.0.min.js"></script>

    <script src="myjs.js"></script>

 </head>

 <body>

     <p>hello</p>

     <button id="hide">隐藏</button>

     <button id="show">显示</button>

 </body>

 </html>

myjs.js

 $(document).ready(function(){

     $("#hide").click(function(){

         $("p").hide();//点击按钮后1秒隐藏

     });

     $("#show").click(function(){

         $("p").show();//点击按钮后1秒显示

     });

 });

通过上面的代码实现了两个按钮来分别控制p元素的隐藏和显示，控制了时间为1秒，视觉效果比较好
但是大部分的隐藏和显示其实是1个按钮来控制的，如音乐播放器的开始/暂停，所以接下来是一个按钮的效果

index.html

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

    <script src="jquery-3.1.0.min.js"></script>

    <script src="myjs.js"></script>

 </head>

 <body>

     <p>hello</p>

     <button id="toggle">隐藏/显示</button>

 </body>

 </html>

myjs.js

$(document).ready(function(){

    $("#toggle").click(function(){

        $("p").toggle();

    });

});

最后来实现这样的一个效果：屏幕上有5个正方形的黄色块状，当点击任意一块时，这块会产生隐藏的缓慢3D动画效果，效果比较好看

index.html

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

    <script src="jquery-3.1.0.min.js"></script>

    <link href="style1.css" rel="stylesheet" type="text/css">

 </head>

 <body>

     <script>

        for(var i=;i<;i++){

            $("<div>").appendTo(document.body);

        }

        $("div").click(function(){

           $(this).hide(,function(){

               $(this).remove();

           });

        });

     </script>

 </body>

 </html>

css代码：

 div{

     background:#ece023;

     width:50px;

     height:50px;

     margin:2px;

     float:left;

 }

相关文章