html文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>淡入淡出动画</title>
<style>
div {
400px;
height: 400px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<input type="button" value="显示">
<input type="button" value="隐藏">
<input type="button" value="切换">
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//淡入：fadeIn 淡出：fadeOut 切换：fadeToggle
$("input").eq(0).click(function () {
$("div").fadeIn(2000);
});
$("input").eq(1).click(function () {
$("div").fadeOut(2000);
})
$("input").eq(2).click(function () {
//如果是滑入状态，就执行滑出的动画，
$("div").fadeToggle(2000);
})
});
</script>
</body>
</html>