Js显示与隐藏

来自CloudWiki
跳转至： 导航， 搜索

<!DOCTYPE html> <html> <head> 

   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>显示与隐藏</title>
   <link rel="stylesheet" href="">
   <style>
       .box{
           width:500px;
           height:400px;
           background:orange;
       }
   </style>
   <script src="js/jquery.min.js"></script>
   <script>
   // .hide("slow/fast/自定义","动画函数",fn)
       $(function(){
           $(".hide").click(function(){
               $(".box").hide(5000,function(){
                   $(".hide").prop("disabled",true);
                   $(".show").prop("disabled",false);
               });
           })
           $(".show").click(function(){
               $(".box").show("fast","linear",function(){
                   $(".hide").prop("disabled",false);
                   $(".show").prop("disabled",true);
               });
           });

           $(".toggle").click(function(){
               $(".box").toggle(1000,function(){
                   alert("动画执行完毕");
               });
           })
       })

       // hide() show()影响了哪些元素，参数有几个，分别代表什么意思，默认参数是什么？
   </script>

</head> <body> <button class="show">显示</button> <button class="hide">隐藏</button> <button class="toggle">切换</button>

</body> </html>

取自“http://www.openbrains.net/mediawiki/index.php?title=Js显示与隐藏&oldid=15350”