jquery 改变标签可见状态的几种方式

最新推荐文章于 2023-06-17 17:18:21 发布

weixin_30920853

最新推荐文章于 2023-06-17 17:18:21 发布

阅读量200

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/roseAT/p/9796115.html

版权

第一种:

$(selector).show(); //立即显示指定标签

$(selector).hide();//立即隐藏指定标签

第二种:

$(selector).fadeIn(ms);//在指定毫秒内渐现

$(selector).fadeOut(ms);//在指定毫秒内渐隐

第三种:

$(selector).toggle();//改变标签的可见状态,如果隐藏则显示,反之则隐藏

另外:

$(selector).is(":hidden");//可以判断指定元素是否隐藏 返回值为布尔值

例子:

一个完整的demo:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>demo-show/hide</title>
</head>
<style>
#out-part{
  margin: 0 auto;
  width: 400px;
  background-color: bisque;
  overflow: hidden;
}
#in-part{
  margin: 100px auto;
  width:200px;
  height: 200px;
  background-color: purple;
}
button{
  display: block;
  width: 100px;
  float: left;
  margin-left: 10px;
}
</style>
<body>
  <!-- 测试部分 -->
  <div id="out-part">
    <div id="in-part"></div>
  </div>
  <br>
  <!-- 按钮部分 -->
  <button id="show">显示</button>
  <button id="hide">隐藏</button>
  <button id="fadeIn">渐现</button>
  <button id="fadeOut">渐隐</button>
  <button id="show-hide">显示/隐藏</button>  
</body>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script>
  $('#show').on('click',function () {//显示
    $('#out-part').show();
  })

  $('#hide').on('click',function () {//隐藏
    $('#out-part').hide();
  })

  $('#fadeIn').on('click',function () {//渐现
    $('#out-part').fadeIn(1000);
  })

  $('#fadeOut').on('click',function () {//渐隐
    $('#out-part').fadeOut(500);
  })

  $('#show-hide').on('click',function () {//显示/隐藏
    //第一种
    // $('#out-part').toggle();
    //第二种
    if($('#out-part').is(":hidden")){//判断是否隐藏
        $('#out-part').fadeIn(1000);//渐现
      }else{
        $('#out-part').hide();
      }
  })
</script>
</html>

转载于:https://www.cnblogs.com/roseAT/p/9796115.html

weixin_30920853

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 改变标签可见状态的几种方式

第一种:$(selector).show(); //立即显示指定标签$(selector).hide();//立即隐藏指定标签第二种:$(selector).fadeIn(ms);//在指定毫秒内渐现$(selector).fadeOut(ms);//在指定毫秒内渐隐第三种:$(selector).toggle();//改...
复制链接

扫一扫