Implementing FadeOut/FadeIn in pure JavaScript
<p>My problem is that only fadeOut works but not fadeIn. I don't use CSS or jQuery for it. And how can I make my code more effective. </p>

<p>The code:</p>

<p>HTML:</p>

<pre><code>&lt;div class="circle"id="circle1"onclick="myFunction()"&gt;&lt;/div&gt;
&lt;div class="circle"id="circle2" style="visibility:visible" &gt;&lt;/div
</code></pre>

<p>JavaScript:</p>

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

    function frame() {
      if (op &lt;= 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 &gt;= 0.95) {
        clearInterval(timer);
        element.style.visibility = "visible";
      }
      element.style.opacity = op;
      op += op * 0.1;
    }
  }
}
</code></pre>