<!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. RCC—使用 HSE/HSI 配置时钟 ---时钟树

    本章参考资料:< STM32F4xx 中文参考手册> RCC 章节.学习本章时,配合< STM32F4xx 中文参考手册> RCC 章节一起阅读,效果会更佳,特别是涉及到寄存器 ...

  2. 华中农业大学校赛 I Catching Dogs

    Catching Dogs Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 1140  Solved: 298[Submit][Status][Web B ...

  3. centos7系统nginx下phalcon环境搭建

    之前我们采用的是Apache服务器,可是每秒响应只能达到2000,听说nginx可以轻易破万, 于是换成nginx试试. phalcon的官网有nginx重写规则的示例,可是却与apache的不一致, ...

  4. JavaScrip——简单练习（输出方式，简单表单验证）

    <script> //输出方式 document.write(Date());//获取当前时间 document.write(1); document.write("<p& ...

  5. 在 Java 8 中获取日期

    前言 前面一篇文章写了<SimpleDateFormat 如何安全的使用?>, 里面介绍了 SimpleDateFormat 如何处理日期/时间,以及如何保证线程安全,及其介绍了在 Jav ...

  6. php接入域账号登陆代码

    php接入域账号登陆代码       //替换本地登录为AD域用户认证//edit by ZhangJin on 2015-05-23 -START-$dn = $user_account.'@fun ...

  7. php -- 文件操作类（文件或文件夹的：创建、删除、复制、移动）

    <? /** * 操纵文件类 * * 例子: * FileUtil::createDir('a/1/2/3'); 测试建立文件夹 建一个a/1/2/3文件夹 * FileUtil::create ...

  8. 【BZOJ】1634: [Usaco2007 Jan]Protecting the Flowers 护花（贪心）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1634 贪心.. 我们发现,两个相邻的牛(a和b)哪个先走对其它的牛无影响,但是可以通过 a的破坏花× ...

  9. 学习:erlang正则

    一.re:run/3. ①.re:run("321321","2132",[caseless]).     {match,[{1,4}]} %% 返回值是 匹配 ...

  10. jQuery功能函数详解

    jQuery通过$.browser对象获取浏览器信息. 属性 说明msie 如果是ie为true,否则为falsemozilla 如果是mozilla相关的浏览器为true,否则为falsesafar ...