<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
// 按钮单击时执行
$("#btnInfo1").click(function(){
$("#div4").fadeIn();
$("#div5").fadeIn("slow");
$("#div6").fadeIn(3000);
});
$("#btnInfo2").click(function(){
$("#div1").fadeTo("slow", 0.2);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.6);
});
$("#btnInfo3").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
})
</script>
<div id="div4" style="width:60px;height:60px;display:none;background-color:red;"></div><br>
<div id="div5" style="width:60px;height:60px;display:none;background-color:green;"></div><br>
<div id="div6" style="width:60px;height:60px;display:none;background-color:blue;"></div>
<div id="div1" style="width:60px;height:60px;background-color:red;"></div><br>
<div id="div2" style="width:60px;height:60px;background-color:green;"></div><br>
<div id="div3" style="width:60px;height:60px;background-color:blue;"></div>
<button id="btnInfo1" type="button">fadeIn淡入</button>
<button id="btnInfo2" type="button">fadeTo淡出</button>
<button id="btnInfo3" type="button">fadeToggle切换</button>
</body>
</html>
