How do I fade in/fade out the contents as the jQuery slide activates and deactivates?
<p>Right now, I have my slide set up and it works fine but I'd like the contents of the slide (#contact-slide) to fade in as the slide activates (slides down) and fade out as the slide deactivates (slides up).</p>

<p>Here is my html:</p>

<pre><code>&lt;section id="contact"&gt;
    &lt;div class="slide-container"&gt;
        &lt;section id="contact-slide"&gt;
            &lt;section id="contact-form"&gt;
                &lt;a href="#" id="slide-up"&gt;&lt;/a&gt;
                &lt;section id="contact-about"&gt;
                    &lt;h2&gt;Who is &lt;span class="green"&gt;Company&lt;/span&gt;?&lt;/h2&gt;
                    &lt;p&gt;We are blah blah blah...&lt;/p&gt;
                &lt;/section&gt;
                &lt;section id="contact-data"&gt;
                    &lt;h2&gt;Get in &lt;span class="green"&gt;touch&lt;/span&gt;!&lt;/h2&gt;
                &lt;/section&gt;
            &lt;/section&gt;
        &lt;/section&gt;
    &lt;/div&gt;
&lt;/section&gt;​
</code></pre>

<p>Below is the js. You can see I tried to insert <code>$('#contact-slide').fadeOut();</code> on line 4 but it didn't work. What am I doing wrong?</p>

<pre><code>  $('a#slide-up').click(function () {
    $('.slide-container').slideUp(400,'easeOutExpo',function(){
      $('#slide-toggle').removeClass('active');
      $('#contact-slide').fadeOut();
    });
    return false;
  });

  $('a#slide-toggle').click(function(e) {
    e.preventDefault();

    var slideToggle = this;
    if ($('.slide-container').is(':visible')) {
      $('.slide-container').slideUp(400,'easeOutExpo',function() {
        $(slideToggle).removeClass('active');
      });
    }
    else {
      $('.slide-container').slideDown(300,'easeInExpo');
      $(slideToggle).addClass('active');
    }
  });
​
</code></pre>
