fade in and fade out in pure javascript without jquery

fade, fadein, fadeout, javascript

Solution

I'd suggest using CSS animation

@-webkit-keyframes fadeout {
    0% {opacity:1;}
    100% {opacity:0;}
}
@keyframes fadeout {
    0% {opacity:1;}
    100% {opacity:0;}
}
.fadeOut {
  opacity:0;
  -moz-animation   : fadeout 1s linear;
  -webkit-animation: fadeout 1s linear;
  animation        : fadeout 1s linear;
}

You only need to add fadeOut class to the element

Problem

Here I have a function that fades a square box with `id="box"` as soon as the page loads. I tried but failed to find out how to fade in the box again or simply how to fade in a box or an element with pure JavaScript not jQuery. Here is my code for `fadeOut()` function: ``` var box = document.getElementById('box'); function fadeOut(elem, speed) { if(!elem.style.opacity) { elem.style.opacity = 1; } setInterval(function(){ elem.style.opacity -= 0.02; }, speed /50); } fadeOut(box, 2000); ``` ``` #box { width: 100px; height: 100px; background-color: blue; } ``` ``` <div id="box"></div> ``` Many thanks in advance to contributors. cheers

Original source