Jquery, not sure why animate height doesn't work as expected
<p>I'm trying to get the following code to work.</p>

<p>When user scrolls to point x the menu wrapper reduces in height.  They can reinstate the height by clicking .extender.  After clicking this link, the link disappears (so there is no toggle functionality).</p>

<p>I see that toggle tends to be a solution in similar use cases, I'd ideally like to know how to solve this problem, and why the code I have doesn't work.</p>

<pre><code>$(document).scroll(function(){
    var height = $('div#zone-menu-wrapper').height();
    if (some_logic){
        $('div#zone-branding-wrapper').animate({height: 10}, 1500);
    }
});

$('.extender').click(function(){
    $('div#zone-branding-wrapper').animate({height: 380}, 1500);
    return false;
});
</code></pre>
