<!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. [ukulele]入门指南

    不少尤克里里初学者在开始学习尤克里里的时候,都会进行尤克里里教程搜索,还有不少新手会问“尤克里里和吉他的区别”“尤克里里好学吗”“尤克里里和弦有哪些”等问题.今天,国际知名乐器品牌Gorilla歌芮拉 ...

  2. jfinal中Interceptor的使用

    一.拦截器是用于对action请求的拦截处理,发生在进入action方法体之前的拦截操作,这样方便了对请求实例做一些文章.   二.自定义.系统已有拦截器都需要实现Interceptor接口,这样才能 ...

  3. spring 注解@Resource @Autowired区别

    1.@Autowired寻找类的时候默认是ByType,也就是通过类的类型来寻找类.不过,也可以通过借助@Qualifier("name")来指定寻找的类名 @Autowired ...

  4. Unix系统编程（）文件描述符和打开文件之间的关系

    目前学习到的是一个文件描述符对应着一个打开的文件,似乎是对应的关系.但是实际上并不是这样的.多个文件描述符指向同一个打开的文件,是可能的也是必要的.这些文件描述符可以在相同或者不同的进程中打开. 要理 ...

  5. ffmpeg 从内存中读取数据 .

    http://blog.csdn.net/leixiaohua1020/article/details/12980423 ——————————————————————————————————————— ...

  6. 002servlet生命周期以及有关servlet的各种知识

    4 Sevlet的生命周期(重点) 有关servlet的类有Servlet,HttpServlet以及GenericServlet. 其实我们要写一个Servlet只要写一个类去实现Servet就可以 ...

  7. 【POJ】1094 Sorting It All Out（拓扑排序）

    http://poj.org/problem?id=1094 原来拓扑序可以这样做,原来一直sb的用白书上说的dfs............ 拓扑序只要每次将入度为0的点加入栈,然后每次拓展维护入度即 ...

  8. 书籍:Building Secure PHP Apps

    Building Secure PHP Apps https://leanpub.com/buildingsecurephpapps

  9. HDU 1284 钱币兑换问题(全然背包:入门题)

    HDU 1284 钱币兑换问题(全然背包:入门题) http://acm.hdu.edu.cn/showproblem.php?pid=1284 题意: 在一个国家仅有1分,2分.3分硬币,将钱N ( ...

  10. 如何用MathType编辑出积分符号

    MathType由于能够编辑出众多的数学符号而备受理工科学生与老师的喜爱.利用它,你可以在文档中随意编写出你想要的公式.对于从来没有用过公式编辑器的人来说,在文档中看到那些复杂的数学公式时总是会为之惊 ...