title: Fade in content, then fade out, then fade in new content
body: <p>What I'm trying to do:</p>
  
  <pre><code>#leftSide          #rightSide (display:none)
   _______________ _______________________________________________
  |               |                                               |
  | category      |                                               |
  |  -link        |                                               |
  |  -link        |                                               |
  |               |                                               |
  | category      |                                               |
  |  -link        |                                               |
  |  -link        |                                               |
  |               |     1. content fades in on link click         |
  |               |     2. new link click fades out old content   |
  |               |     3. new content fades in                   |
  |               |                                               |
  |               |                                               |
  |               |click -&gt; fade in -&gt; click -&gt; fade out + fade in|  
  |               |                                               |
  |               |                                               |
  |_______________|_______________________________________________|
  </code></pre>
  
  <p>Every time I click on a link in a category, I want to fade in <code>#rightSide</code> with the content of that link, then if I click a new link, the old content fades out and the new content fades in and so on so forth for all other links.  </p>
  
  <p>What I have so far works in the way that I click on a link, and said div fades in, then I click a second link, then the second div fades in right underneath instead of fading out the old div and fading in the new one.</p>
  
  <pre><code>&lt;body&gt;
      &lt;script&gt;
          $(document).ready(function() {
  
              $('#div_1, #div_2').addClass('js');
              $('a[rel^=div]').click(function(){
                  $('#' + this.rel).fadeIn();
              });
  
          });
      &lt;/script&gt;
      &lt;!--CONTAINER--&gt;
      &lt;div id="container"&gt;
          &lt;!--LEFTSIDE--&gt;
          &lt;div id="leftSide"&gt;
              &lt;div class="logo"&gt;&lt;/div&gt;
              &lt;div class="portfolio"&gt;
                  &lt;h1&gt;blog&lt;/h1&gt;
                  &lt;h1&gt;portfolio&lt;/h1&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#" rel="div_1"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" rel="div_2"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;h1&gt;photography&lt;/h1&gt;
                      &lt;ul&gt;
                          &lt;li&gt;test&lt;/li&gt;
                          &lt;li&gt;another&lt;/li&gt;
                      &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!--RIGHTSIDE--&gt;
          &lt;div id="rightSide"&gt;
              &lt;div id="div_1"&gt;Div 1&lt;/a&gt;
              &lt;div id="div_2"&gt;Div 2&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--CONTAINER--&gt;
  &lt;/body&gt;
  </code></pre>