jquery实现多行文本框高度变化

         看了锋利的jquery，做了3个用jquery实现多行文本框高度变化的效果的小练习。这3个练习是层层完善提高效果的过程。先来看下练习一的效果图：

       

         实现的功能是通过点击文本框上的放大，缩小按钮来控制文本框高度的增加和减小。

         代码的思路是点击放大按钮后进行判断，如果文本框的高度小于500，那么重新设置高度，在原有的基础上加50。同理，点击缩小的按钮再进行判断，如果文本框的高度大于50，那么重新设置高度，在原有的基础上减50。

         但是这样写的缺陷是评论框的变化效果很呆板，缺乏缓冲效果。所以在第二个练习，我们 把它改进用animate()动画方法来控制文本框的高度。

        代码的思路是还是给放大和缩小按钮添加点击事件然后进行判断。只是这次判断文本框是否处于动画，如果处于动画过程中，则不追加其它动画，以免造成动画队列不必要的累积，使效果出现问题。如果评论框未处于动画中，则再判断如果评论框的高度小于500，则用animate()方法，让它的高度在0.4秒内增大40。   

 $('.bigger').click(function(){ //放大按钮绑定单击事件
      if(!$comment.is(":animated")){ //判断是否处于动画
	if( $comment.height() < 500 ){ 
	   $comment.animate({ height : "+=50" },400); //重新设置高度，在原有的基础上加50
			  }
			}
		})

       缩小则相反。

$('.smaller').click(function(){//缩小按钮绑定单击事件
    if(!$comment.is(":animated")){//判断是否处于动画
	if( $comment.height() > 50 ){
	   $comment.animate({ height : "-=50" },400); //重新设置高度，在原有的基础上减50
				}
			}
		});

      练习三的目的是在多行文本框中，还有另外一个应用，就是通过控制多行文本框的滚动条的变化，使文本框里的内容滚动。给向上按钮添加click事件，然后相同的判断文本框是否处于动画中，如果未处于，则用animate()方法，让滚动条的高度在0.4秒内减小50。代码如下：

<span style="font-size:18px;">$('.up').click(function(){ //向上按钮绑定单击事件
	if(!$comment.is(":animated")){//判断是否处于动画
	    $comment.animate({ scrollTop  : "-=50" } , 400);
			}
		})</span>

     向下则同理。通过这个练习，主要学习了animate()的用法，以及用animate()来控制scrollTop滚动条的高度的方法。