JQurey放大缩小文本域

HTML布局
<div id="msg">
        <div id="tab">
            <span id="bigger">放大</span><span id="smaller">缩小</span>
        </div>
        <div>
            <textarea id="content" rows="5" cols="25"  >
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            </textarea>
        </div>
   </div>

CSS代码

<style>
    #msg{
    width: 300px;
    margin: 100px;
}
#tab{
    width: 100%;
    margin-bottom: 3px;
    overflow: hidden;
}
#tab span{
    background: green;
    margin: 0 3px;
    padding: 2px 4px;
    float: left;
    display:block;
    cursor: pointer;
}
#content{
    width: 300px;
    resize: none;
}

</style>

js代码
<script>
    $(function(){

    var $content = $("#content");

    $("#bigger").click(function(){

        //判断是否处于动画状态
        if(!$content.is(":animated")){
            //不处于动画状态
            if($content.height() < 500){
                $content.animate({height : "+=50"},300);//重新设置高度并加50
            }else{
                alert("已放大到最大高度");
            }   
        }
    });

    $("#smaller").click(function(){

        if(!$content.is(":animated")){
            if($content.height() > 50){
                $content.animate({height : "-=50"},300);
            }else{
                alert("已缩小到最小高度");
            }
        }

    });


});
</sctipt>