Fade in content, then fade out, then fade in new content
<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>
