title: Can't .load external page with .fadeIn when using .click
body: <p>///////////////////////////</p>
  
  <p>This was really a bad approach for me.  After much tweaking, I've come to a conclusion that it's better to load all external elements (html) at once and only apply the fadeIn effect on click instead of trying to load external page at the same time.  The below approach did not result in smooth fadeIn effect &amp; caused delay while the external page was loading.  </p>
  
  <p>///////////////////////////</p>
  
  <p>I am loading an external page by:</p>
  
  <pre><code>$('a').click(function() {
  $('#result').load($(this).attr('href'));
  
  return false;
  });
  </code></pre>
  
  <p>And I am trying to load the external page with fadeIn.</p>
  
  <p>I've looked at other answers but none of them works for me.  Perhaps I am not understanding the answer correctly or applying it incorrectly.  My best effort (after countless tries) is this so far but this fades in the div #one first then simply loads #load.  (I did it this way because I understand that I can't apply fade effect to the loading div itself.)  </p>
  
  <pre><code>$("a").click(function () {
  $("#one:hidden:first").fadeIn("slow");
  $('#load').load($(this).attr('href'));
  
  return false;
  });
  </code></pre>
  
  <p>I am very new to jQuery and this might be something very simple to everyone else except me.</p>
  
  <p>I would really appreciate any help.  Thanks.</p>
  
  <p>/////////////////////Here is the markup///////////////////</p>
  
  <pre><code>&lt;a href="./test.html" class="link"&gt;Load Page 1&lt;/a&gt;
  
  &lt;div id="one"&gt;
  
  &lt;div id="load"&gt;load here&lt;/div&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>/////////////////////////////////////////////////////////////    </p>