jQuery-输入框大小变大变小（动画）

最新推荐文章于 2022-12-24 08:15:00 发布

Annaluo

最新推荐文章于 2022-12-24 08:15:00 发布

阅读量2.8k

点赞数

分类专栏： jQuery 文章标签： jquery html javascript class css

本文链接：https://blog.csdn.net/Annaluo/article/details/78189186

版权

jQuery 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入框放大缩小</title>
</head>
<body>
<form>
    <div>
        <span class="bigger">big</span>
        <span class="smaller">small</span>
    </div>
    <div>
        <textarea id="comment" rows="8" cols="20">
            多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框
            多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框
            多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框
            多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框
            多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框
            多行文本框多行文本框多行文本框多行文本框
            多行文本框多行文本框多行文本框多行文本框多行文本框
            多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框
        </textarea>
    </div>
</form>

<script src="../libs/jquery.js"></script>
<script>
    $(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
                }
            }
        });
    });
</script>
</body>
</html>

Annaluo

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery-输入框大小变大变小（动画）

输入框放大缩小 big small 多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多
复制链接

扫一扫