title: jquery animate left with fixed loading div
body: <p>I know this is supposed to be simple but i cant figure out what is wrong.
  I am using fixed div at left-bottom corner to display loading/spinner div.</p>
  
  <p>Loader should slide from left to right when it is shown (initially it is set to display:none;).
  On Hide it should slide from right to left and disappear.</p>
  
  <p><a href="http://jsfiddle.net/bababalcksheep/R28rm/4/" rel="nofollow"><strong>JSFIDDLE Here</strong></a></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#loading span {
      float:left;
      margin-top :1px;
      margin-left :3px;
      margin-right :3px;
      line-height:16px;
      font-size:12px;
      font-family:"oswald";
  }
  #loading img {
      float:left;
      margin-top : 1px;
  }
  #loading {
      display: none;
      position: fixed;
      z-index: 1000000;
      left:0;
      top:90% !important;
      width:60px;
      height:20px;
      background: black;
      color:white;
      border: 1px solid #ddd;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;button type="button" id="sh"&gt;Show!&lt;/button&gt;
  &lt;button type="button" id="hd"&gt;Hide!&lt;/button&gt;
  
  &lt;div id="loading"&gt;&lt;span&gt; loading &lt;/span&gt;
      &lt;img class="loader" src=" http://i.stack.imgur.com/FhHRx.gif" width="16" height="16" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>javascript</strong></p>
  
  <pre><code>// Show loading 
  $('#sh').on('click', function () {
       $("#loading")
           .animate({
               left: -160
           }, {
               duration: 'slow',
               easing: 'easeOutBounce'
           })
           .animate({
               left: 0
           }, {
               duration: 'slow',
               easing: 'easeOutBounce'
           })
           .show();
   });
  </code></pre>