Implementing FadeOut/FadeIn in pure JavaScript

Question

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.

The code:

HTML:

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

JavaScript:

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;
    }
  }
}

Michael Warner · Accepted Answer · 2016-08-17 18:09:45Z

1

There are a few reasons this is not working.

0 * anything is still 0 so var op=0; and op += op * 0.1 will always be zero.
It is set to hidden not visible while transitioning to fully visible.

I played around with it to make it work but I refactored you code to fit my style while I did it. This is what I came up with.

function myFunction() {

    var element = document.getElementById( "circle2" );
    var op;
    var timer;

    if ( element.style.visibility === "visible" ) {
        op = 1;
        timer = setInterval( fadeOut, 100 )
    } else {
        op = 0.1;
        timer = setInterval( fadeIn, 100 )
    }

    function fadeOut() {
        if ( op <= 0.1 ) {
            clearInterval( timer );
            element.style.visibility = "hidden";
        }
        element.style.opacity = op;
        op -= op * 0.1;
    }

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

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

answered Aug 17, 2016 at 18:09

Michael Warner

4,3673 gold badges25 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ibrahim Over a year ago

why ist the element.style.visibility = "visible"; outside of the if statement? It works but why.

Michael Warner Over a year ago

Because of issue number 2. We need the element to have the visible attribute so when we change the opacity we will see the change. If it is in the if statement the opacity will change been we won't see anything because the element when still be hidden.

Collectives™ on Stack Overflow

Implementing FadeOut/FadeIn in pure JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related