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

刺骨的言语ヽ痛彻心扉 2022-08-07 03:51 225阅读 0赞

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

![Center][]

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

代码的思路是点击放大按钮后进行判断，如果文本框的高度小于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滚动条的高度的方法。

[Center]: /images/20220805/f8bacc7af77b47238c4a78f4cff5470a.png