title: javascript library prototype functions not executing one after the other
body: <p>I am working on a javascript library. here is the basic code:</p>
  
  <pre><code>(function(){
          var int,
              method,
              Jist = function(s){
                  return new Jist.fn.init(s);
              };
          Jist.fn = Jist.prototype ={
              init : function(s){
                  if(!s){
                      return this;
                  }
                  else{
                      this.length = 1;
                      if (typeof s === "object"){
                          this[0] = s;
                      }
                      else if(typeof s === "string"){
                          var obj;
                          obj = document.querySelectorAll(s);
                          this[0] = obj;
                          this.elem = this[0];
                      }
                      return this;
                  }
              },
          }
          Jist.fn.init.prototype = Jist.fn;
          Jist.fn.init.prototype = {
              print : function(txt){
                  for(var i=0; i&lt;this.elem.length; i++) {
                      this.elem[i].innerHTML = txt;
                  }
                  return this;
              },
              click : function(callback){
                  for(var i=0; i&lt;this.elem.length; i++) {
                      this.elem[i].addEventListener("click",callback,false);
                  }
                  return this;
              },
              fadeOut : function(ms) {
                  var elem = this.elem;
                  var opacity = 1,
                      interval = 50,
                      gap = interval / ms;
                  function func() { 
                      opacity -= gap;
                      for(var i=0; i&lt;elem.length; i++) {
                          elem[i].style.opacity = opacity;
                      }
                      if(opacity &lt;= 0) {
                          window.clearInterval(fading); 
                          for(var i=0; i&lt;elem.length; i++){
                              elem[i].style.display = 'none';
                          }
                      }
                  }
                  var fading = window.setInterval(func, interval);
                  return this;
              },
              fadeIn : function(ms) {
                  var opacity = 0,
                      interval = 50,
                      gap = interval / ms,
  
                      elem = this.elem;
                      for(var i=0; i&lt;elem.length; i++){
                          elem[i].style.display = 'block';
                          elem[i].style.opacity = opacity;
                      }
                  function func() { 
                      opacity += gap;
                      for(var i=0; i&lt;elem.length; i++){
                          elem[i].style.opacity = opacity;
                      }
                      if(opacity &gt;= 1) {
                          window.clearInterval(fading);
                      }
                  }
                  var fading = window.setInterval(func, interval);
                  return this;
              }
          };
          window.Jist = window.jist = window.Jis = window.jis = window.Jit = window.jit = window._ = Jist;
  })();
  </code></pre>
  
  <p>And here is what I have in my body section to test out the library:</p>
  
  <pre><code>&lt;div id="fader"&gt;&lt;/div&gt;
  &lt;input type="button" id="inpt" value="click"&gt;&lt;/input&gt;
  &lt;script&gt;
  jist("#inpt").click(function(){
      jist("#fader").print("FooBar").fadeOut(1000).fadeIn(1000).print("");
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The line, <code>jist("#fader").print("FooBar").fadeOut(1000).fadeIn(1000).print("");</code> is supposed to put the text "FooBar" in the div(which it does) then fade out, then fade in and wipe the text from the div.</p>
  
  <p>But instead what happens is it begins fading out, then quickly tries to fadein. That is because all the functions are executing at the same time instead of one after the other.</p>
  
  <p>Does anyone know how I can change my library so that happens? This is a jQuery-like library so I would like it to work similar to query.</p>
  
  <p>Thank you so much!</p>