title: click event delay and pre loader animation
body: <p>I want to combine two techniques in page transition. first, when user click a link , the click event should be delayed about 200ms and displaying css animation (ex: fading), after that the new page will  be loaded normally. Then, for visitors with slow internet connection, they will be presented with pre-loader right after the first animation. The problem is, it seems both techniques doesn't fit each others. Any advice guys?</p>
  
  <p>PS: Actually I inspired by these guys website : <a href="http://rsq.com/" rel="nofollow">http://rsq.com/</a></p>
  
  <p>here's my code:</p>
  
  <pre><code>$body = $("body");
  $(document).on({
      ajaxStart: function () {
          $body.addClass("loading"); //for slow connection, visitors with faster connection may not notice this...
      },
      ajaxStop: function () {
          $body.removeClass("loading");
      }
  });
  $('a').on("click", function () {
      if ($(this).attr('href') != '#') {
          var href = $(this).attr('href');
          $('#wrapper').addClass('fade_animation'); //animation right before new page request
          setTimeout(function () {
              window.location = href
          }, 200);                
          return false;
          $.post($(this).attr('href'));
      }    
  });
  </code></pre>