Fork me on GitHub

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

第一种:

$(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>

 

posted @ 2018-10-16 09:41  粥里有勺糖  阅读(1520)  评论(0)  编辑  收藏  举报