jq中三种显示及隐藏方法

来源：互联网发布：贪吃蛇java小游戏代码编辑：程序博客网时间：2024/05/22 00:28

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   div{
    width: 450px;
    height: 200px;
    background: red;
    display: none;
   }
  </style>

  <script src="js/jquery-1.11.1.min.js"></script>
  <script>
   /*
    *整个方法最主要的就是fadein(),fadeout()显示及隐藏的方法，
    * */
   $(function(){
    //点击显示时让盒子渐渐淡入
    $("button").eq(0).click(function(){
     $("div").fadeIn(2000);
    });
    $("button").eq(1).click(function(){
     $("div").fadeOut(2000,function(){
      //alert("动画完成");
     });
    });
    //点击显示让盒子滑下
    $("button").eq(2).click(function(){
     $("div").slideDown(2000,function(){
      //alert("动画完成");
     });
    });
    $("button").eq(3).click(function(){
     $("div").slideUp(2000,function(){
      //alert("动画完成");
     });
    });
    $("button").eq(4).click(function(){
     $("div").show(2000,function(){
      //alert("动画完成");
     });
    });
    $("button").eq(5).click(function(){
     $("div").hide(2000,function(){
      //alert("动画完成");
     });
    });
   })
  </script>
</head>
<body>
  <button>渐渐显示</button>
  <button>渐渐隐藏</button>
  <button>下滑显示</button>
  <button>上滑隐藏</button>
  <button>show显示</button>
  <button>hide隐藏</button>
  <div></div>
</body>
</html>

阅读全文

0 0