基于jQuery实现文本框缩放以及上下移动功能

想让你的网页更加的炫酷，想让你的留言评论更加的具有互动性吗，那么请仔细研究下本代码吧。

jQuery代码：

 $(function(){ 

          var $comment = $('#comment'); 

          $('.bigger').click(function(){ 

              if(!$comment.is(":animated")){ 

                  if($comment.height() < 500){ 

                      //$comment.height($comment.height() + 50); 

                      $comment.animate({height:"+=50"},400); 

                  } 

              } 

          }); 

           $('.smaller').click(function(){ 

               if(!$comment.is(":animated")){ 

                   if($comment.height() > 50){ 

                       //$comment.height($comment.height() - 50); 

                       $comment.animate({height:"-=50"},400); 

                   } 

               } 

           }); 

           $('.up').click(function(){ 

              if(!$comment.is(":animated")){ 

                  $comment.animate({scrollTop:"-=50"},400); 

              } 

           }); 

           $('.down').click(function(){ 

               if(!$comment.is(":animated")){ 

                   $comment.animate({scrollTop:"+=50"},400); 

               } 

           }); 

       }); 

HTML代码：

<div class="msg"> 

       <div class="msg_caption"> 

           <span class="bigger">放大</span> 

           <span class="smaller">缩小</span> 

           <span class="up">向上</span> 

           <span class="down">向下</span> 

       </div> 

        <div> 

            <textarea id="comment" rows="8" cols="20"> 

                 水电费水电费爽肤水法萨芬沙发放松放松沙发 

                当爽肤水飞沙发发沙发发发发 

                水电费水电费爽肤水法萨芬沙发放松放松沙发 

                当爽肤水飞沙发发沙发发发发 

            </textarea> 

        </div> 

    </div>

CSS代码：

.bigger , .down , .up , .smaller{ 

    background-color: #f1a55c; 

} 

代码奉上，具体如何使用，使用在何处，我就不多说了，小伙伴们自由发挥吧。