本文实现一个控制出现、消失、透明度的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.1.0.min.js"></script>
<script src="myjs2.js"></script>
</head>
<body>
<button id="in">fadeIn</button><!-- 慢慢出现动画 -->
<button id="out">fadeOut</button><!-- 慢慢消失动画 -->
<button id="toggle">fadeToggle</button><!-- 一个按钮直接控制出现/消失动画 -->
<button id="to">fadeTo</button><!-- 透明度效果 -->
<div id="div1" style="width:80px;display:none;height:80px;background-color: aqua"></div>
<div id="div2" style="width:80px;display:none;height:80px;background-color: #ece023"></div>
<div id="div3" style="width:80px;display:none;height:80px;background-color: darkgoldenrod"></div> </body>
</html>
js：
$(document).ready(function(){
$("#in").on("click",function(){
$("#div1").fadeIn();//fadeIn慢慢出现
$("#div2").fadeIn();
$("#div3").fadeIn();
});
$("#out").on("click",function(){
$("#div1").fadeOut();//fadeOut慢慢消失
$("#div2").fadeOut();
$("#div3").fadeOut();
});
$("#toggle").on("click",function(){
$("#div1").fadeToggle();//一个按钮直接控制出现/消失动画
$("#div2").fadeToggle();
$("#div3").fadeToggle();
});
$("#to").on("click",function(){
$("#div1").fadeTo(,0.5);//透明度效果,如淡化，1表示完全不透明，0表示完全透明
$("#div2").fadeTo(,0.7);
$("#div3").fadeTo(,0.3);
});
});