• 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>
  • 相关阅读:
    PHP+MYSQL单例模式的滑铁卢
    碰到一个安装SQl2008 Express Edition出错的怪异情况
    用虚拟并口解决向USB条码打印机发送ZPL指令的解决方案
    让excanvas支持动态创建的canvas标签(附演示文件)
    sql 检索语句
    c++ string 类基本用法样例
    Sqlite c/c++ api 学习
    最常见的20种VC++编译错误信息
    C#动态调用C++编写的DLL函数
    C++中将BYTE转16进制字符串
  • 原文地址:https://www.cnblogs.com/roseAT/p/9796115.html
Copyright © 2020-2023  润新知