jQuery中animate设置属性的一个问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-2.1.4.min.js"></script>
    <style>
        .bigger, .smaller {
            display: inline-block;
            zoom: 1;
            vertical-align: baseline;
            margin: 0 2px;
            outline: none;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            font: 14px/100% Arial, Helvetica, sans-serif;
            padding: .5em 2em .55em;
            text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
            -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
            color: #fff;
            border: solid 1px #980c10;
            background: #d81b21;
            background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
        }
    </style>
</head>
<body>
<form action="#">
    <div class="msg">
        <div class="msg_caption">
            <span class="bigger">放大</span>
            <span class="smaller">缩小</span>
        </div>
        <div>
            <textarea name="" id="comment" cols="30" rows="10">
                多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化
                                多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化

                                多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化

                                多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化

                                多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化

            </textarea>
        </div>
    </div>
</form>

<script>
    //要求：
    //1.点击放大，如果评论框的高度小于500px，在原基础上加50px
    //2.点击缩小，如果评论框的高度大于100px，在原基础上减50px
    $(function () {
        //获取评论框的高度
        var $comment = $("#comment");
        var $height = $comment.height();
        $(".bigger").click(function () {
            if ($height < 500) {
　　　　　　　　　　//第一种
//                $comment.animate({height: "+= 50"});
　　　　　　　　　　//第二种
                $comment.animate({height: "+=50"}, 400);
            }
        });
        //缩小
        $(".smaller").click(function () {
            if ($height > 100) {
                $comment.animate({height: "-=50"}, 400);
            }
        });
    })
</script>
</body>
</html>
第一种这样设置的height属性无效，第二种才有效。。。习惯性的打出空格键。。