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>

继续学习

新建文件

<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>

提交重置代码

自动运行

章节

笔记

提问

课件

反馈

捐赠