zoukankan      html  css  js  c++  java
  • jq 切换功能toggle

    ---恢复内容开始---

    $(document).ready(function () {
      $(".jianjie").click(function () {
        $(this).toggleClass("brief");//切换类名,在一个类名上增加、删除类名
      });
      $(".jj_v").click(function () {
        $(".none_v").slideToggle("slow");//点击滑动显示、隐藏
      });
      $(".jj_v").click(function () {
        $(".none_v").fadeToggle(1000);//点击淡入、淡出
      });
      $(".jj_v").click(function () {
        $(".none_v").toggle();//点击显示、隐藏
      });
    });
      var a = 0;
      $(".jj_v").click(function () {
          a++;
        if(a%2){
             $(".none_v").show(1000);//1秒展开
            $(".none_v").fadeIn("slow");//淡入
         }else{
            $(".none_v").hide(1000);//1秒隐藏
            $(".none_v").fadeOut("1000");//淡出
         }
    });
     

    <!DOCTYPE html>
    <html>
    <head>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#div1").fadeTo("slow",0.15);//透明度
        $("#div2").fadeTo("slow",0.4);
        $("#div3").fadeTo("slow",0.7);
      });
    });
    </script>
    </head>

    <body>

    <p>演示带有不同参数的 fadeTo() 方法。</p>
    <button>点击这里,使三个矩形淡出</button>
    <br><br>
    <div id="div1" style="80px;height:80px;background-color:red;"></div>
    <br>
    <div id="div2" style="80px;height:80px;background-color:green;"></div>
    <br>
    <div id="div3" style="80px;height:80px;background-color:blue;"></div>

    </body>
    </html>

    ---恢复内容结束---

  • 相关阅读:
    Mysql Explain 详解【转】
    Windows下Gradle安装与配置
    MYSQ创建联合索引,字段的先后顺序,对查询的影响分析
    给.Net 5 Api增加JwtBearer认证
    纸壳CMS 3.3.6发布升级.Net 5
    PL/SQL Developer登入时候报ORA-12638: 身份证明检索失败的解决办法
    Mybatis 日志工厂
    Mybatis 配置解析
    Mybatis 完成增删改查
    Mybatis 简介
  • 原文地址:https://www.cnblogs.com/liaohongwei/p/9021576.html
Copyright © 2011-2022 走看看