jq中三种显示及隐藏方法

最新推荐文章于 2023-05-23 09:40:00 发布

黑暗中的鬼

最新推荐文章于 2023-05-23 09:40:00 发布

阅读量2.8k

点赞数

本文链接：https://blog.csdn.net/Mrzhaoplus/article/details/78511840

版权

<!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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jq中三种显示及隐藏方法

div{ width: 450px; height: 200px; background: red; display: none; } /* *整个方法最主要的就是fadein(),fadeout()显示及隐藏的方法， * */ $(function(){ //点击显示时让
复制链接

扫一扫