SlideDown/Up by animating height with jquery
<p>I want to achieve an effect that is similar to the header effect on <a href="http://www-142.ibm.com/software/products/us/en/category/bpm-software?lnk=mhso" rel="nofollow"><strong>ibm.com</strong></a>.
The header itself is fixed. When you scroll down the header gets smaller. When you scroll
back it gets its normal height.</p>

<p>This is how I tried it:</p>

<pre><code>$(document).ready(function() {           

    $(window).scroll(function(e){
        var scrollTop = $(window).scrollTop();
        if(scrollTop &gt; 50){
                $('.main_nav').animate({
                height:"30px"
            });
        }
    });

});
</code></pre>

<p>This makes the header get smaller. But how can I animate it back to its normal height? Any other ideas?</p>
