<!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. 通达OA 几次通过OA进行的足球抢票活动确实对OA系统提出了非常大挑战

    今年集团赞助了中超的足球比赛,有比赛的时候会提前发一些球票.怎么发.发给谁这就是一个问题.后来确定通过OA来抢票. 通过在OA上发表帖子.通过信息提醒.大家看到信息提示后在帖子后面回复,依据回复先后确 ...

  2. 李洪强iOS经典面试题35-按层遍历二叉树的节点

    李洪强iOS经典面试题35-按层遍历二叉树的节点 问题 给你一棵二叉树,请按层输出其的节点值,即:按从上到下,从左到右的顺序. 例如,如果给你如下一棵二叉树:    3   / \  9  20   ...

  3. Ubuntu下安装RabbbitVCS（图形化svn管理工具）- Ubuntu也有TortoiseSVN

    在Windows下用惯了TortoiseSVN这只小乌龟,到了Ubuntu下很不习惯命令行的SVN,于是经过一番寻找安装了RabbitVCS这款SVN图形化前端工具(官方网站:http://rabbi ...

  4. FreeRTOS 任务优先级分配方案

    任务优先级说明下面对 FreeRTOS 优先级相关的几个重要知识点进行下说明,这些知识点在以后的使用中务必要掌握牢固.  FreeRTOS 中任务的最高优先级是通过 FreeRTOSConfig.h ...

  5. 算法图绘制工具Graphviz

    graphviz是贝尔实验室设计的一个开源的画图工具,它的强大主要体现在“所思即所得"(WYTIWYG,what you think is what you get),这是和office的“ ...

  6. python学习笔记（7）--爬虫隐藏代理

    说明: 1. 好像是这个网站的代理http://www.xicidaili.com/ 2. 第2,3行的模块不用导入,之前的忘删了.. 3. http://www.whatismyip.com.tw/ ...

  7. 跟着百度学习php之ThinkPHP的运行流程-1

    我在index\Lib\Action\目录下新建了一个ShowAction.class.php文件.ps:该目录是控制器的目录. 然后这个文件中继承了action这个类.代码如下: <?php ...

  8. lua工具库penlight--05日期和时间

    创建和显示时间 Date类提过了简洁的使用date和time的方法.它依赖于os.date和os.time. Date对象可以通过table创建,如果os.date,同时提过了获取和设置date 成员 ...

  9. Tablespace for table '`pomelo`.`bag`' exists. Please DISCARD the tablespace before IMPORT.

    //遇到的问题是,删除数据库之后,重新创建数据库,在创建数据库表的时候,明明没有该表,却提示存在这个表.这是数据库缓存造成的 //解决方法 FLUSH TABLES; /* 安装MySql数据库(略) ...

  10. web 汇率

    http://www.cnblogs.com/beimeng/p/3789940.html 网站虽小,五脏俱全(干货)   前言 最近一个朋友让帮忙做一个汇率换算的网站,用业余时间,到最后总算是实现了 ...