title: Vanilla Javascript .fadein() .fadeOut() without JQuery
body: <p>I am developing for IE10+ so i decided not to use JQuery. I write custom javascript function to Select, Fadein, FadeOut etc and it is working fine.
  but i like to use the Function in JQuery Style (Object.fadeIn(), Object.FadeOut() etc).</p>
  
  <p>Instead of JQuery Selector i use this.</p>
  
  <pre><code>function _(el){
      return document.getElementById(el);
  }
  </code></pre>
  
  <p>When i need to select a Dom object i use this.</p>
  
  <pre><code>var myButton = _("button");
  </code></pre>
  
  <p>When i need to fadeIn Or fadeOut any object i use this.</p>
  
  <pre><code>function fade(type, ms, el) {
    var isIn = type === 'in',
      opacity = isIn ? 0 : 1,
      interval = 50,
      duration = ms,
      gap = interval / duration;
  
    if(isIn) {
      el.style.display = 'inline';
      el.style.opacity = opacity;
    }
  
    function func() {
      opacity = isIn ? opacity + gap : opacity - gap;
      el.style.opacity = opacity;
  
      if(opacity &lt;= 0) el.style.display = 'none'
      if(opacity &lt;= 0 || opacity &gt;= 1) window.clearInterval(fading);
    }
  
    var fading = window.setInterval(func, interval);
  
  }
  </code></pre>
  
  <p>Here is the specific code to fade my button</p>
  
  <pre><code>fade('out', 500, myButton);
  </code></pre>
  
  <p>I like to use like this <code>_( "myButton" ).fadeIn( 100 );</code> </p>
  
  <blockquote>
    <p>Update: The trick was to use prototype function for "-" to add additional
    functionality like fadein(), fadeOut() .</p>
  </blockquote>