title: Transition between html change
body: <p>I have these two functions, one removes everything from the page and one adds it back. When everything is removed a black-ish screen is shown with a loading logo in the middle. </p>
  
  <pre><code>Base.showLoading = function () {
      var r = false;
      if (!$('body').hasClass('overlay')) {
          Obj.tempHtml = $('body').html();
          $('body').html('');
          $('body').addClass('overlay');
          r = true;
      }
      return r;
  };
  
  Base.hideLoading = function () {
      var r = false;
      if ($('body').hasClass('overlay')) {
          $('body').html(Obj.tempHtml);
          delete Obj.tempHtml;
          $('body').removeClass('overlay');
          r = true;
      }
      return r;
  };
  </code></pre>
  
  <p>And the CSS class <code>overlay</code>:</p>
  
  <pre><code>.overlay
  {
      background-color: #111;
      background-position: center;
      background-image: url('../img/loading_black.gif');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
  }
  </code></pre>
  
  <p>Now, how would I be able to have a smooth transition between the two?</p>
  
  <p>Right now it just goes straight to a black screen and doesn't seem right. I have no idea how to do this.</p>
  
  <p>either JS/jQuery or CSS solutions are fine :). CSS preferred though. Thanks :)</p>
  
  <p>I know doing this removes all binds etc but I have taken that into account and <code>hideLoading</code> is like never used so yeah :)</p>