jQuery中animate設置屬性的一個問題

時間 2019-11-29

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-2.1.4.min.js"></script>
    <style>
        .bigger, .smaller {
            display: inline-block;
            zoom: 1;
            vertical-align: baseline;
            margin: 0 2px;
            outline: none;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            font: 14px/100% Arial, Helvetica, sans-serif;
            padding: .5em 2em .55em;
            text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
            -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
            color: #fff;
            border: solid 1px #980c10;
            background: #d81b21;
            background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
        }
    </style>
</head>
<body>
<form action="#">
    <div class="msg">
        <div class="msg_caption">
            <span class="bigger">放大</span>
            <span class="smaller">縮小</span>
        </div>
        <div>
            <textarea name="" id="comment" cols="30" rows="10">
                多行文本框高度變化多行文本框高度變化多行文本框高度變化多行文本框高度變化多行文本框高度變化多行文本框高度變化
                                多行文本框高度變化多行文本框高度變化多行文本框高度變化多行文本框高度變化多行文本框高度變化多行文本框高度變化

                                多行文本框高度變化多行文本框高度變化多行文本框高度變化多行文本框高度變化多行文本框高度變化多行文本框高度變化

                                多行文本框高度變化多行文本框高度變化多行文本框高度變化多行文本框高度變化多行文本框高度變化多行文本框高度變化

                                多行文本框高度變化多行文本框高度變化多行文本框高度變化多行文本框高度變化多行文本框高度變化多行文本框高度變化

            </textarea>
        </div>
    </div>
</form>

<script>
    //要求：
    //1.點擊放大，若是評論框的高度小於500px，在原基礎上加50px
    //2.點擊縮小，若是評論框的高度大於100px，在原基礎上減50px
    $(function () {
        //獲取評論框的高度
        var $comment = $("#comment");
        var $height = $comment.height();
        $(".bigger").click(function () {
            if ($height < 500) {
　　　　　　　　　　//第一種 // $comment.animate({height: "+= 50"});
　　　　　　　　　　//第二種
 $comment.animate({height: "+=50"}, 400);
            }
        });
        //縮小
        $(".smaller").click(function () {
            if ($height > 100) {
                $comment.animate({height: "-=50"}, 400);
            }
        });
    })
</script>
</body>
</html>