fadeOut and fadeIn elements with JS (Drop In)

fadein

Element.prototype.fadeIn = function(callback) {
  var ele = this,
      opacity = ele.style.opacity = Number(ele.style.opacity) || 0.0,
      fadeInLoop = null,
      intervalTime = 10,
      opacityAmount = 0.05;

  ele.style.display = 'block';

  // If the opacity is already greater than or equal to zero then there is nothing
  // for us to do and we break out here.
  if (opacity >= 1.0) {
    return false;
  }

  // Loop through until we set the opacity to 1.0
  fadeInLoop = setInterval(function() {
    opacity += opacityAmount;

    ele.style.opacity = opacity;
    ele.style.filter = 'alpha(opacity=' + opacity * 100 + ')';

    if (opacity >= 1.0) {
      clearInterval(fadeInLoop);

      if (typeof callback !== "undefined") {
        callback();
      }
    }
  }, intervalTime);
}

document.getElementById('some-id').fadeIn(function() {
  console.log('Faded in the element.');
});

fadeout

Element.prototype.fadeOut = function(callback) {
  var ele = this,
      opacity = ele.style.opacity = Number(le.style.opacity) || 1.0,
      fadeOutLoop = null,
      intervalTime = 10,
      opacityAmount = 0.05;

  // If the opacity is already below or equal to zero then there is nothing
  // for us to do and we break out here.
  if (opacity <= 0.0) {
    return false;
  }

  // Loop through until we set the opacity to 0.0
  fadeOutLoop = setInterval(function() {
    opacity -= opacityAmount;

    ele.style.opacity = opacity;
    ele.style.filter = 'alpha(opacity=' + opacity * 100 + ')';

    if (opacity <= 0.0) {
      clearInterval(fadeOutLoop);
      ele.style.display = 'none';

      if (typeof callback !== "undefined") {
        callback();
      }
    }
  }, intervalTime);
}

document.getElementById('some-id').fadeOut(function() {
  console.log('Faded out the element.');
});