在纯JavaScript中实现FadeOut/FadeIn

我的问题是只有淡出有效，而不是淡出。我不使用CSS或jQuery。如何使我的代码更有效

守则：

HTML:

这不起作用有几个原因

0*任何东西仍然是0，所以var op=0；op+=op*0.1将始终为零

在转换为完全可见时，它被设置为隐藏不可见

我用它使它工作，但我重构了你的代码，以适应我的风格，而我这样做了。这就是我想到的


函数myFunction（）{
var元素=document.getElementById（“圈2”）；
var-op；
无功定时器；
if（element.style.visibility==“可见”）{
op=1；
定时器=设置间隔（衰减，100）
}否则{
op=0.1；
定时器=设置间隔（fadeIn，100）
}
函数衰减（）{
如果（op=0.95）{
清除间隔（计时器）；
}
element.style.opacity=op；
op+=op*0.1；
}
}
你好
测试

为什么列出元素。style.visibility=“visible”；在if语句之外？但是为什么呢？因为第二期。我们需要元素具有可见属性，所以当我们更改不透明度时，我们将看到更改。如果在If语句中，不透明度将改变，因为元素仍然隐藏，所以我们不会看到任何东西。

<div class="circle"id="circle1"onclick="myFunction()"></div>
<div class="circle"id="circle2" style="visibility:visible" ></div

function myFunction() {
  var element = document.getElementById("circle2");
  if (element.style.visibility === "visible") {
    var op = 1;
    var timer = setInterval(frame, 100)

    function frame() {
      if (op <= 0.1) {
        clearInterval(timer);
        element.style.visibility = "hidden";
      }
      element.style.opacity = op;
      op -= op * 0.1;
    }
  } else {
    var op = 0;
    var timer = setInterval(frame, 10)

    function frame() {
      if (op >= 0.95) {
        clearInterval(timer);
        element.style.visibility = "visible";
      }
      element.style.opacity = op;
      op += op * 0.1;
    }
  }
}