Fade in / Fade out

1.js

// fade out 

function fade(el) {
  var op = 1;
  var timer = setInterval(function () {
    if (op <= 0.1){
      clearInterval(timer);
      el.style.display = 'none';
    }
    el.style.opacity = op;
    op -= op * 0.1;
  }, 50);
}

// fade in

function fadeIn(el) {
  var op = 0;
  el.style.opacity = op;
  el.style.display = 'inline-block';
  
  var timer = setInterval(function () {
    if (op >= 1.0){
      clearInterval(timer);
    }
    el.style.opacity = op;
    op = op + 0.1;
  }, 50);
}

2.js

// fade out

function fadeOut(el){
  el.style.opacity = 1;

  (function fade() {
    if ((el.style.opacity -= .1) < 0) {
      el.style.display = "none";
    } else {
      setTimeout(fade, 40);
    }
  })();
}

// fade in

function fadeIn(el){
  el.style.opacity = 0;
  el.style.display = "block";

  (function fade() {
    var val = parseFloat(el.style.opacity);
    if (!((val += .1) > 1)) {
      el.style.opacity = val;
      setTimeout(fade, 40);
    } 
  })();
}

3.js

// fade out

function fadeOut(el){
  el.style.opacity = 1;

  (function fade() {
    if ((el.style.opacity -= .1) < 0) {
      el.style.display = "none";
    } else {
      requestAnimationFrame(fade);
    }
  })();
}

// fade in

function fadeIn(el){
  el.style.opacity = 0;
  el.style.display = "block";

  (function fade() {
    var val = parseFloat(el.style.opacity);
    if (!((val += .1) > 1)) {
      el.style.opacity = val;
      requestAnimationFrame(fade);
    } 
  })();
}

4.js

// fade out

function fadeOut(el){
  el.style.opacity = 1;

  (function fade() {
    if ((el.style.opacity -= .1) < 0) {
      el.style.display = "none";
    } else {
      requestAnimationFrame(fade);
    }
  })();
}

// fade in

function fadeIn(el, display){
  el.style.opacity = 0;
  el.style.display = display || "block";

  (function fade() {
    var val = parseFloat(el.style.opacity);
    if (!((val += .1) > 1)) {
      el.style.opacity = val;
      requestAnimationFrame(fade);
    } 
  })();
}

5.js

// fade in

function fadeIn(el, display){
  el.style.opacity = 0;
  el.style.display = display || "block";

  (function fade() {
    var val = parseFloat(el.style.opacity);
    var proceed = ((val += 0.1) > 1) ? false : true;
    
    if (proceed) {
      el.style.opacity = val;
      requestAnimationFrame(fade);
    }
  })();
}

usage.js

var el = document.getElementById("lga");

fadeOut(el);
fadeIn(el);
fadeIn(el, "inline-block");

Thanks a lot! I wasn't sure if I could do this without jQuery.
http://codepen.io/bnoden/full/qNdXBZ/
https://github.com/bnoden/splash/blob/master/js/js-splash.js

I found that by requesting animation frames prevents the element from "flashing" before fading in. Great work.

Nice code. Finally i can more animated without jQuery help. Not bad idea to keep the pure js code.

Nice Gist, But a good usage will do for those codes. Provide a usage for it.