Html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<input type="button" value="淡入" id="fadeIn" />
<input type="button" value="淡出" id="fadeOut" />
<input type="button" value="切换" id="fadeToggle" />
<input type="button" value="淡入到那里" id="fadeTo" /><br /><br />
<div id="div"></div>
</body>
</html>
Css部分
* {
margin: 0;
padding: 0;
}
input:nth-child(1) {
margin: 0 0 0 750px;
}
input {
width: 100px;
height: 30px;
margin: 50px 0;
}
div {
width: 200px;
height: 200px;
background-color: red;
display: none;
margin: 20px auto;
}
Jquery部分
$(function() {
//1.淡入 fadeIn
$('#fadeIn').click(function() {
//让 id 为 div 的这个元素淡入.
//$('#div').fadeIn(); //不给参数相当于给了一个默认的动画时长,mormal400 毫秒
$('#div').fadeIn(1000);
});
//2.淡出 fadeOut
$('#fadeOut').click(function() {
//让 id 为 div 的这个元素淡出
$('#div').fadeOut(1000);
});
//3.切换 fadeToggle
$('#fadeToggle').click(function() {
$('#div').fadeToggle(1000);
});
//4.淡入到那里 fadeTo
$('#fadeTo').click(function() {
$('#div').fadeTo(1000, 0.5);
});
});
