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. HDU-1207 汉诺塔II

    汉诺塔  四根所需要的步数的规律: 规律:a[1]=1;a[2]=a[1]+2;a[3]=a[2]+2;(2个加2^1)a[4]=a[3]+4;a[5]=a[4]+4;a[6]=a[5]+4;(3个加 ...

  2. Introduction to Glide, Image Loader Library for Android, recommended by Google

    In the passed Google Developer Summit Thailand, Google introduced us an Image Loader Library for And ...

  3. Lost's revenge - HDU 3341 (自动机+DP)

    题目大意:先给你一些子串,然后给你一个母串,母串里面的字母可以任意调换位置,问最多这个母串经过一些位置变动最多能包含多少个子串.   分析:可以比较明显的看出来的DP,先求出来ATGC分别有多少,然后 ...

  4. springmvc框架原理分析

    第一步:用户发起请求到前端控制器(DispatcherServlet) 第二步:前端控制器请求HandlerMapping查找Handler,可以根据xml配置,注解进行查找 第三步:处理器映射器Ha ...

  5. 356. Line Reflection

    首先找到X方向的中点,如果中点是一个点,那么分别从这个点开始往左右找就行:如果是一个区间,比如1 2之间,那么首先总点数得是偶数,然后以1和2往左右两边找就行.. 找的时候,有3种情况: 同时没找到, ...

  6. Collections之sort、reverse

    在使用List集合时,通常情况下希望从集合中得到的对象是按照一定顺序排列的,但是List集合的默认排序方式为按照对象的插入顺序,可以通过java.util.Collections类的静态方法sort( ...

  7. js判断字符串是否包含指定的字符

    判断字符串是否包含指定字符是很常用的功能,比如说,注册时用户名限制不能输入"管理员",或者需要js判断url跳转链接是否包含某个关键词等-- <!DOCTYPE html&g ...

  8. linux 一些笔记内容

    #which COMMAND : 显示命令路径#whatis COMMAND : 命令出现在哪个章节#type COMMAND :显示一个命令是内部命令还是外部命令#printenv :显示系统信息 ...

  9. CDOJ 92 – Journey 【LCA】

    [题意]给出一棵树,有n个点(2≤N≤105),每条边有权值,现在打算新修一条路径,给出新路径u的起点v,终点和权值,下面给出Q(1≤Q≤105)个询问(a,b)问如果都按照最短路径走,从a到b节省了 ...

  10. android中的文件操作详解以及内部存储和外部存储（转载）

    原文链接:http://m.blog.csdn.net/article/details?id=17725989 摘要 其实安卓文件的操作和java在pc环境下的操作并无二致,之所以需要单独讲解是因为安 ...