jQuery中的隐藏和显示

来源：互联网发布：秦舞阳13岁杀人知乎编辑：程序博客网时间：2024/06/07 23:29

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="js/jquery-1.11.0.min.js.js" charset="UTF-8"></script>
       <style>
           #img{
               width: 50px;
               height: 50px;
           }
       </style>
   </head>
   <body>
       <img id="img" src="img/android-alarm.png" />

       <input type="button" id="btn1" value="隐藏" />
       <input type="button" id="btn2" value="显示" />

       <input type="button" id="btn3" value="滑动显示" />
       <input type="button" id="btn4" value="滑动隐藏" />

       <input type="button" id="btn5" value="淡显示" />
       <input type="button" id="btn6" value="淡隐藏" />

       <input type="button" id="btn7" value="自定义" />
   </body>
   <script type="text/javascript">
       $("#btn1").click(function(){
           $("#img").hide(2000);
       })
       $("#btn2").click(function(){
           $("#img").show(2000);
       })
       $("#btn3").click(function(){
           $("#img").slideDown(2000);
       })
       $("#btn4").click(function(){
           $("#img").slideUp(3000);
       })
       $("#btn5").click(function(){
           $("#img").fadeIn(5000);
       })
       $("#btn6").click(function(){
           $("#img").fadeOut(5000);
       })

       $("#btn7").click(function(){
           $("#img").animate({
               width: "10%",
                 height: "10%",
           },2000);
       });
   </script>
</html>

阅读全文

0 0