jquery 多行文本框高度变化

最新推荐文章于 2021-03-25 03:02:38 发布

原创最新推荐文章于 2021-03-25 03:02:38 发布 · 979 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function

js文章专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用jQuery实现动态调整网页上评论框高度的方法。通过点击放大或缩小按钮，评论框的高度会相应地增加或减少50像素，同时确保动画平滑过渡。此功能增强了用户体验，并展示了jQuery在网页交互设计中的应用。

	$(function(){
	    var $comment = $('#comment');  //获取评论框
	    $('.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
				}
			}
		});
	});