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. Java 热部署深入探索

    简介 在 Java 开发领域,热部署一直是一个难以解决的问题,目前的 Java 虚拟机只能实现方法体的修改热部署,对于整个类的结构修改,仍然需要重启虚拟机,对类重新加载才能完成更新操作.对于某些大型的 ...

  2. javascrip实现无缝滚动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. PHP学习之［第09讲］PHP 的 Mysql 数据库函数 (微型博客系统)

    一.数据库函数: mysql_connect(数据库地址,用户名,密码) mysql_select_db(数据库名) mysql_set_chartset(‘编码’) //PHP5.2.3以后的函数 ...

  4. 缓存的概念（反向代理、CDN）

    缓存在我们的日常开发中随处可见,理解缓存的概念,本质就是就近处理,比如很多热点数据,访问量很多,我们需要使用,就可以把它 缓存起来,然后下次访问就不用再去数据库的去查询了,而是直接使用缓存,现在说说大 ...

  5. HDU 4628 多校第三场1008 dp

    这题就没什么好说的了.直接枚举2 ^ 16 的状态,用1表示拿这位,0表示不拿,每次判断是否可以这么拿. #include <iostream> #include <cstdio&g ...

  6. htaccess URL重写rewrite与重定向redirect(转)

    1. 将 .htm 页面映射到 .php 1 Options +FollowSymlinks 2 RewriteEngine on 3 RewriteRule ^(.*)\.htm$ $1.php [ ...

  7. PHP Predefined Interfaces 预定义接口(转)

    SPL提供了6个迭代器接口: Traversable 遍历接口(检测一个类是否可以使用 foreach 进行遍历的接口) Iterator 迭代器接口(可在内部迭代自己的外部迭代器或类的接口) Ite ...

  8. [转] Linux文件系统之hard link&symbol link

    这个图很清楚的表示出硬链接和软链接的方式. 1.硬链接: 基本定义:硬链接是有着相同inode号的仅文件名不同的文件(该文件名包含路径信息). 理解:如图,hard link和原始file通过同一个i ...

  9. 如何解决eclipse上的Android程序“Please ensure that adb is correctly located at 'D:\eclipse\sdk\platform-tools\adb.exe' and can be executed.”小问题？

    首先,把运行的Android模拟器和eclipse一块儿关了, 然后win+R,cmd, 下面输入adb kill_server 再输入adb start_server 之后重新运行项目,不出意外的话 ...

  10. codevs 1993 草地排水 USACO

    /*Dinic*/ #include<iostream> #include<cstdio> #include<cstring> #include<queue& ...