用jQuery淡入淡出动画

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>