• 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>

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

  • 相关阅读:
    Orcle(条件查询、排序)
    Oracle(简介、基本查询)
    eclipse(配置jdk、tomcat、修改颜色)
    Oracle(安装Windows XP和Oracle)
    vue中ref的作用
    ES6-babel转码器
    如何正确移除Selenium中window.navigator.webdriver的值(转载)
    反爬虫之信息校验反爬虫
    反爬虫简述
    爬虫验证码识别(1) 图形验证码的识别
  • 原文地址:https://www.cnblogs.com/liaohongwei/p/9021576.html
Copyright © 2020-2023  润新知