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

第一种这样设置的height属性无效，第二种才有效。。。习惯性的打出空格键。。

jQuery中animate设置属性的一个问题的更多相关文章

  1. jQuery中Animate进阶用法（一）

    jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...

  2. jQuery中animate()方法用法实例

    本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...

  3. jQuery中样式和属性模块简单分析

    1.行内样式操作 目标:扩展框架实现行内样式的增删改查 1.1 创建 css 方法 目标:实现单个样式或者多个样式的操作 1.1.1 css方法 -获取样式 注意:使用 style 属性只能获取行内样 ...

  4. jQuery中animate动画第二次点击事件没反应

    jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

  5. jQuery中animate()的方法以及$(&quot;body&quot;).animate({&quot;scrollTop&quot;:top})不被Firefox支持问题的解决

    转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/50846678 本文出自[我是干勾鱼的博客] jQuery中animate()的方 ...

  6. JQuery中常用的 属性选择器

    jQuery中使用$()作为选择符极大提高工作效率以及方便快捷;一些常用属性的选择器由以下几种 1) $('#id') id选择器 2) $('.class') css选择器,class类名 3) $ ...

  7. jquery中event对象属性与方法小结

    JQuery事件中的Event属性是经常性的被忽略的.大多数时间你的确不怎么用它,但有些时候它还是它还是有作用的.如获知触发时用户的环境(是否按了shift etc).每个浏览器对event都有不同的 ...

  8. 如何在js或者jquery中操作EL表达式的一个List集合

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 先说明此篇博客看明白了可以干嘛: 就是在js或者jquery中操作一个EL表达式的一个list集合或者复杂类型 ...

  9. js和JQuery中offset等属性对比

    HTML: 内容在滚动条下面 <div id="outerDiv"> <div id="myDiv" class="myDiv&qu ...

随机推荐

  1. C#趣味程序---爱因斯坦的台阶问题

    问题:设有一阶梯,每步跨2阶.最后余1阶.每步跨3阶.最后余2阶:每步跨5阶.最后余4阶:每步跨6阶.最后余5阶:每步跨7阶.刚好到阶顶.问共同拥有多少阶梯? using System; namesp ...

  2. redis基础之订阅发布、主从复制和事务(四)

    前面已经学习了redis的基本的命令行操作和数据类型,下面开始redis一些有趣的功能. 订阅和发布机制 定义:发布者相当于电台,订阅者相当于客户端,客户端发到频道的消息,将会被推送到所有订阅此频道的 ...

  3. 【鉴别】日版iPhone如何通过IMEI查询运营商

    SoftBank.au.docomo是日本的三大运营商,以前日本不同运营商的iPhone在型号上进行区分,但iPhone5s/5c上三个运营商的型号都一致,所以无法在型号上对运营商进行区分,本文介绍通 ...

  4. background-origin:规定 background-position 属性相对于什么位置来定位

    background-origin:border-box;此时设置background-size:contain; 根据容器的边框定位 例如:容器的盒模型如下:设置了padding:20px;bord ...

  5. jquery checkbox选中

    楼主写的在1.6之前是没有问题的,jquery 1.6后就要这样写了,<input type='checkbox' id='cb'/> <script> //获取是否选中 va ...

  6. PostgreSQL视频去重 图片去重系列1

    PostgreSQL 在视频.图片去重,图像搜索业务中的应用 图片搜索 PostgreSQL的图像搜索插件使用了非常主流的Haar wavelet技术对图像进行变换后存储 gist 索引方法(支持pa ...

  7. Spring MVC学习之三：处理方法返回值的可选类型

    http://flyer2010.iteye.com/blog/1294400 ———————————————————————————————————————————————————————————— ...

  8. error: icpc: Command not found

    交叉编译qt的程序时,出现错误:error: icpc: Command not found. 解决方法,详情查看链接. http://www.cnblogs.com/zengjfgit/p/4744 ...

  9. 假设A.jsp内设定一个<jsp:useBean>元素：

    假设A.jsp内设定一个<jsp:useBean>元素: <jsp:useBean id=”bean1” class=”myBean” /> 下列哪一个为真?(选择1项) A. ...

  10. php -- 魔术方法 之 对象输出 : __toString()

    对象输出:__toString() 当一个对象被当做字符串进行输出时(echo,print),会调用__toString()方法 <?php //输出对象 class Person{ //属性 ...