javascript - jquery animate 行の高さ - 可能ですか?

Question

jquery の animate プロパティに関する簡単な質問です。アニメーション化することは可能ですか?

方法がわかりませんか？ここに私のhtmlがあります

<nav>
  <a href="">Page 1</a>
  <a href="">Page 2</a>
  <a href="">Page 3</a>
  <a href="">Page 4</a>
  <a href="">Page 5</a>
  <a href="">Page 6</a>
</nav>
<div style="height:9000px;"></div>

およびJavaScript：

$(function(){
    $('nav').data('size','big');
});

$(window).scroll(function(){
    var $nav = $('nav');
    var $a = $('nav > a');
    if ($('body').scrollTop() > 0) {
        if ($nav.data('size') == 'big') {
            $nav.data('size','small').stop().animate({
                height:'40px',
                line-height:'40px'
            }, 300);
            $a.data('size','small').stop().animate({
                height:'20px'
            }, 300);
        }
    } else {
        if ($nav.data('size') == 'small') {
            $nav.data('size','big').stop().animate({
                height:'100px',
                line-height:'40px'
            }, 300);
            $a.data('size','big').stop().animate({
                height:'40px'
            }, 300);


        }  
    }
});

nav と a タグのアニメーションを同期させる方法もあります。

ありがとう

ps本当に基本的な質問でしたら申し訳ありません-jqueryは初めてです

http://jsfiddle.net/jamesmstone/c7nLB/32/