jquery animate 函数 实现动画效果   参数一  比如高度宽度 之类的：'-=50'   参数二  速度之类

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

* { margin:0; padding:0;font:normal 12px/17px Arial; }

.msg {width:300px; margin:100px; }

.msg_caption { width:100%; overflow:hidden; margin-bottom:1px;}

.msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;color:white; }

.msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;}

</style>

 <!--   引入jQuery -->

<script src="../../scripts/jquery.js" type="text/javascript"></script>

 <script type="text/javascript">

    $(function(){

        var $comment = $('#comment');  //获取评论框

        $('.bigger').click(function(){ //放大按钮绑定单击事件

           if(!$comment.is(":animated")){ //判断是否处于动画

              if( $comment.height() < 500 ){

                      $comment.animate({ height : "+=50" },400); //重新设置高度，在原有的基础上加50

              }

            }

        })

        $('.smaller').click(function(){//缩小按钮绑定单击事件

           if(!$comment.is(":animated")){//判断是否处于动画

                if( $comment.height() > 50 ){

                    $comment.animate({ height : "-=50" },400); //重新设置高度，在原有的基础上减50

                }

            }

        });

    });

  </script>

</head>

<body>

<form action="" method="post">

<div class="msg">

    <div class="msg_caption">

        <span class="bigger" >放大</span>

        <span class="smaller" >缩小</span>

    </div>

    <div>

        <textarea id="comment" rows="8" cols="20">多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.</textarea>

    </div>

</div>

</form>

</body>

</html>

jquery animate函数实现的更多相关文章

  1. jquery animate()背景色渐变的处理

    jquery animate函数不能处理背景色渐变,需要使用jquery.color插件 gitHub地址:https://github.com/jquery/jquery-color/ 使用代码: ...

  2. 学习记录jQuery的animate函数

    很久之前就对jQuery animate的实现非常感兴趣,不过前段时间很忙,直到前几天端午假期才有时间去研究. jQuery.animate的每种动画过渡效果都是通过easing函数实现的.jQuer ...

  3. 图片放大功能插件及jquery.extend函数理解

    前端时间,产品提出社区评论中的图片需要有放大功能.感觉可以共用,所以就想整合一个插件,过程中也借鉴了一些例子. 分析下自己的代码思路: var scaleImg = function(opts) { ...

  4. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  5. jQuery 效果函数

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

  6. jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining

    一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...

  7. jquery常用函数与方法汇总

    1.delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目. jQuery1.4新增.用于将队列中的函数延时执行.他既可以推迟动画队列的执行,也可以用于自定义队 ...

  8. jQuery animate()动画效果

    1.jQuery动画效果 jQuery animate()方法用于创建自定义动画 $(selector).animate({params},speed,callback); //必需的 params ...

  9. jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

随机推荐

  1. [Locked] Number of Connected Components in an Undirected Graph

    Number of Connected Components in an Undirected Graph Given n nodes labeled from 0 to n - 1 and a li ...

  2. CodeForces 221(div 2)

    A 无trick水题... /* * Author: Plumrain * Created Time: 2013-12-24 22:26 * File Name: B.cpp */ #include ...

  3. [转载]10 Best Tools For Websites And Apps Development Ever

    转载自: http://www.websurfmedia.com/10-best-tools-for-websites-and-apps-development-ever/   The world i ...

  4. vue.js学习笔记(一)：什么是mvvm框架，vue.js的核心思想

    一:MVVM框架 MVVM框架的应用场景:  1.针对具有复杂交互逻辑的前端应用 2.提供基础的架构抽象 3.提供ajax数据持久化,保证前端用户体验 二:vue.js的核心思想 (一):数据驱动 ( ...

  5. Windows7下32位IE异常不能打开解决方法

    今天更新了Update及安装了一些软件,重启电脑后发现32位IE不能正常打开,而64位IE正常. 错误信息如下: 问题签名:  问题事件名称: BEX  应用程序名: iexplore.exe  应用 ...

  6. random.sample

    import random k = random.sample(xrange(0x41, 0x5b), 26) print k import random k = random.sample(xran ...

  7. mysql中数据库database、实例instance、会话session的关系

    1. No suitable driver found for http://127.0.0.1:3306/test jdbc_url错误,jdbc走自己的协议. 正确的路径应该是:jdbc:mysq ...

  8. url编码解码-js编码、C#编码

    JS编码解码 函数一定义和用法encodeURI() 函数可把字符串作为 URI 进行编码. 语法 encodeURI(URIstring) 参数 描述 URIstring 必需.一个字符串,含有 U ...

  9. Http API设计

    Heroku团队根据heroku platform api和他们自己内部系统的实践经验总结了一些http api设计的准则,发布到了github上. 地址:https://github.com/int ...

  10. BestCoder冠军赛 - 1005 Game 【DP】

    [题意] 给出一个set,set中有几个数. 现在给出n个人,环成一圈搞约瑟夫... 开始时从第1号报数,每次从set中随机选出一个数s,等报数到s后,报s的人出圈,其他人继续报数. 最后只剩1人时, ...