jQuery多行文本框高度变化

嗯嗯

新建文件

<html> <meta charset="utf-8"/> <head> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> </head> <body> <form> <div class="msg"> <div class="msg_caption"> <span class="bigger">放大</span> <span class="smaller">缩小</span> </div> <div> <textarea id="comment" rows="8" cols="20">陈冬:(喘气，笑)压力挺大啊……景海鹏:(喘气)对，载荷还挺大……做好开伞准备啊!陈冬:好的。……景海鹏:过载压力小一点了啊。陈冬:小多了!景海鹏:准备一下报告词:“神舟十一号报告:状态正常”。陈冬:好的!神舟十一号报告:状态正常。完毕! 开主伞后…… 景海鹏:安全带系紧点儿。陈冬:好嘞!景海鹏:能系多紧系多紧。陈冬:好，系上了!景海鹏:座椅提升，准备!陈冬:好嘞!(用力)景海鹏:手放好啊! 安全带再系紧啊!陈冬:紧了一些，OK!景海鹏:身体用力，身体贴合(座椅)，身体用力。陈冬:明白!据央广还原“回家”之路- 13时11分神舟十一号飞船接收到北京航天飞行控制中心的返回指令，轨道舱与返回舱成功分离。此后，返回舱启动制动返回程序，开始返回地面。约30分钟后，返回舱进入主着陆场区测控搜索范围。 13时59分 </textarea> </div> </div> </form> <script> $(function () { var $comment = $('#comment'); $('.bigger').click(function () { if (!$comment.is(":animated")) { if ($comment.height() < 500) { //重新设置高度，在原有的基础上加50 $comment.animate({height: "+=50"}, 400); } } }); $('.smaller').click(function () { if (!$comment.is(":animated")) { if ($comment.height() > 50) { //重新设置高度，在原有的基础上减50 $comment.animate({height: "-=50"}, 400); } } }); }); </script> </body> </html>

提交重置代码

自动运行

jQuery多行文本框高度变化

高级PHP经典实例汇总

高级PHP经典小实例汇总视频教程

高级PHP经典实战视频教程

初级帝国CMS企业仿站教程

初级WordPress零基础新手搭建个人博客及企业网站

初级极致CMS零基础建站教学视频

初级前端项目-尚优选【HTML/CSS/JS技术综合实战】

中级Vue3.0从0到搭建通用后台管理系统项目实战

初级零基础前端课程【Vue进阶学习及实战应用】

初级WEB前端教程【HTML5+CSS3+JS】

初级apipost极速入门

中级Vue3+TypeScript实战教程-企业级项目实战