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>

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

  • 相关阅读:
    Vue 项目中 ESlint 配置
    ajax、axios、fetch 对比
    vue 中 axios 使用
    NodeJS 多版本管理(NVM)
    axio 请求中参数是数组
    Python 图片文字识别
    .NET 使用 VLC 播放视频
    Python 常见问题
    SpringBoot(4) SpringBoot热部署
    SpringBoot(3) 文件上传和访问
  • 原文地址:https://www.cnblogs.com/liaohongwei/p/9021576.html
Copyright © 2011-2022 走看看