jq 切換功能toggle
阿新 • • 發佈：2018-12-13
---恢復內容開始---
$(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>
---恢復內容結束---