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>