<!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. uint64, sizet_t, ssizet_t

    uint64 在32位平台 typedef unsigned long long int uint64_t;在64位平台 typedef unsigned long int uint64_t;不同的t ...

  2. linux中使用lftp上传下载文件

    lftp是linux中一款ftp服务器相比windows中的ftp显得要复杂不少了,下面我来总结一下lftp文件上传,文件下载,及文件查找等等相关命令吧. lftp连接的几种方法,最常用的是lftp ...

  3. nyoj 760 See LCS again

    See LCS again 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 There are A, B two sequences, the number of ele ...

  4. 1.3 Seven Testing Principles

    1.3 Seven Testing Principles 2015-06-23 Principle 1 - Testing shows presence of defects(测试显示存在缺陷) Te ...

  5. ural1517后缀数组

    题意:求两串字符(0————255)的最长公共字串 思路:先将两个字符链接起来,中间用一个不曾出现过的字符,然后直接求出height数组,然后根据它的特性,求出最长的公共字串,当然这个最长公共字串的坐 ...

  6. js　開始时间，当前时间，结束时间的比較

    //開始时间不能小于当前时间 function startTimeIsBigThanTotay(startTime){ var startdate = new Date((startTime).rep ...

  7. 利用MapReduce实现数据去重

    数据去重主要是为了利用并行化的思想对数据进行有意义的筛选. 统计大数据集上的数据种类个数.从网站日志中计算访问地等这些看似庞杂的任务都会涉及数据去重. 示例文件内容: 此处应有示例文件 设计思路 数据 ...

  8. 一只青蛙一次可以跳上1级台阶，也可以跳上2级……它也可以跳上n级。求该青蛙跳上一个n级的台阶总共有多少种跳法。

    // test14.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> #include< ...

  9. fastjson常用操作

    一. fastjson生成json字符串(JavaBean,List<JavaBean>,List<String>,List<Map<String,Object&g ...

  10. signal基础

    signal man 7 signal 1.kill -l 显示所有信号 kill -signal PID killall -signal name 2.产生信号 ctrl+c => SIGIN ...