Jquery slide down div after an item fades in
<p>this is my jquery code</p>

<pre><code>        jQuery(document).ready(function(){  
            jQuery('.start_video').click(function(){
                jQuery(this).fadeOut("slow", function(){
                    jQuery('#video').animate({ opacity: 'show' }, "slow");
                    jQuery('#video_stream').animate({slideDown: 'slow' }, "slow");
                });
            });

            jQuery('.close_video').click(function(){
                jQuery('#video').fadeOut("slow", function(){
                    jQuery('.start_video').fadeIn("slow");
                });
            });
        });   
</code></pre>

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

<pre><code>&lt;div id="video_stream"&gt;
    &lt;a href="#" class="start_video"&gt;Start Video&lt;/a&gt;

    &lt;div id="video" class="hidden"&gt;
        &lt;a href="#" title="#" class="close_video"&gt;Close&lt;/a&gt; 
    &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I have some standard CSS. When the start_video link is clicked, the start_video link fades out and after that, the video div fades in. Inside the video div is a close_video link. When that link is clicked, the video div fades out and the start_video link fades in. However, I want to also have the "video_stream" div that wraps everything to slide down as its height changes with the fading in of "video" and also slideUp when the height changes with the fadeOut of "video". </p>

<p>I was wondering how to do this. I tried adding in slideUp functions in Jquery but I think I was putting them in the wrong place. I also tried the .animate() function using the slideUps but that did not work. I want it to be a smooth slideDown while the "Video" div is fading in and vice versa.</p>

<p>Thanks in advance!</p>
