Performing a function after another
<p>I'm having difficulty getting another function to work after one has just completed. The first half of my code works, but the function afterwards doesn't. What am I doing wrong?</p>

<p>The HTML</p>

<pre><code>&lt;div id="feature"&gt;
    &lt;div id="open"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The CSS</p>

<pre><code>#feature {
    position:relative;
    width:100%;
    height:450px;
}
#open {
    position:relative;
    width:100%;
    height:200px;
    background:red;
}
</code></pre>

<p>The jQuery</p>

<pre><code>$('#open').click(function () {
    $(this).animate({
        height: 50
    }, {
        duration: 'slow'
    }).css('overflow', 'visible'),
    function () {
        $('#open').animate({
            height: 200
        }, {
            duration: 'slow'
        })
    };
    // Animation complete.
});
</code></pre>

<p>A JS Fiddle.</p>

<p><a href="http://jsfiddle.net/C8fA7/" rel="nofollow">http://jsfiddle.net/C8fA7/</a></p>
