码迷,mamicode.com
首页 > 其他好文 > 详细

jq 切换功能toggle

时间:2018-12-13 13:18:20      阅读:899      评论:0      收藏:0      [点我收藏+]

标签:script   删除   ogg   button   显示   style   query   开始   var   

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

$(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="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>

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

jq 切换功能toggle

标签:script   删除   ogg   button   显示   style   query   开始   var   

原文地址:https://www.cnblogs.com/liaohongwei/p/9021576.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!