Pure JavaScript fade in function

Based on this site

EDIT-1
Added the functionality so that user can specify the animation duration(@Marzian comment)

You can try this:

function fadeIn(el, time) {
  el.style.opacity = 0;

  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity + (new Date() - last) / time;
    last = +new Date();

    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };

  tick();
}

var el = document.getElementById("div1");
fadeIn(el, 3000); //first argument is the element and second the animation duration in ms

DEMO

Update: It seems that people enjoy my minimalistic and elegant approach, Updated for 2022:

No need for complex mechanisms. Just use CSS, which has it out of the box and has better performance overall.

Basically you achieve it with CSS by setting a transition for the opacity. In JavaScript that would be:

const div = document.querySelector('#my-div');
div.style.transition='opacity 1s';

and as a trigger you just set opacity to 0:

div.style.opacity=0;

This will create a 1 second fade out effect and you can use the trigger anywhere. The inverse can also be done to achieve a fade in effect.

Here's a working example:

const div = document.querySelector('#my-div');
div.style.transition='opacity 1s';

// set opacity to 0 -> fade out
setInterval(() => div.style.opacity=0, 1000);

// set opacity to 1 -> fade in
setInterval(() => div.style.opacity=1, 2000);

#my-div { background-color:#FF0000; width:100%; height:100%; padding: 10px; color: #FFF; }

<div id="my-div">Hello!</div>