javascript onclick淡入淡出div(短代码)

<div id="myDiv" style="display: none;">
  这是要淡入淡出的内容
</div>
<button onclick="fadeToggle()">点击触发</button>

function fadeToggle() {
  var div = document.getElementById("myDiv");
  if (div.style.display === "none") {
    fadeIn(div);
  } else {
    fadeOut(div);
  }
}

function fadeIn(element) {
  var op = 0.1;  // 初始透明度为0.1
  element.style.display = "block";
  var timer = setInterval(function () {
    if (op >= 1) {
      clearInterval(timer);
    }
    element.style.opacity = op;
    element.style.filter = "alpha(opacity=" + op * 100 + ")";
    op += op * 0.1;
  }, 10);
}

function fadeOut(element) {
  var op = 1;  // 初始透明度为1
  var timer = setInterval(function () {
    if (op <= 0.1) {
      clearInterval(timer);
      element.style.display = "none";
    }
    element.style.opacity = op;
    element.style.filter = "alpha(opacity=" + op * 100 + ")";
    op -= op * 0.1;
  }, 10);
}