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. 饭卡 （背包01 一维数组） http://acm.hdu.edu.cn/showproblem.php?pid=2546

    /* 从一组数据中选出n个数,使这n个数的和最接近一个值x, 背包问题, 从一系列菜中,从最贵的菜(MAX)之外中选出几个菜,使菜的总价格sum最接近money-5:money-sum-MAX; 钱数 ...

  2. 【行业干货】ASOS：外来快时尚品牌的入华战 - 行业干货 - 京东内部论坛 - Powered by Discuz!

    [行业干货]ASOS:外来快时尚品牌的入华战 - 行业干货 - 京东内部论坛 - Powered by Discuz! [行业干货]ASOS:外来快时尚品牌的入华战

  3. win10在安装Oracle11g时出现了:[INS-13001]环境不满足最低要求，及未找到文件 E:\app\xxj\product\11.2.0\dbhome_1\owb\external\oc4j_applications\applications\WFMLRSVCApp.ear

    win10安装Oracle11g碰到的3个问题: 1.win10在安装Oracle11g时出现了:[INS-13001]环境不满足最低要求 2.未找到文件 E:\app\xxj\product\11. ...

  4. 看小白如何解决ajax跨域问题

    由于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决ajax的跨域问题.本篇将讲述一个小白从遇到跨域不知道 ...

  5. NOI2003 文本编辑器

    练手QAQ #include<iostream> #include<algorithm> #include<cstdio> #include<cstdlib& ...

  6. 关于 java.util.concurrent 您不知道的 5 件事--转

    第 1 部分 http://www.ibm.com/developerworks/cn/java/j-5things4.html Concurrent Collections 是 Java™ 5 的巨 ...

  7. Android 高仿微信实时聊天 基于百度云推送

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38799363 ,本文出自:[张鸿洋的博客] 一直在仿微信界面,今天终于有幸利用百 ...

  8. 新版本ButterKnife的配置

    新版本的ButterKnife的添加方式发生了变化,然后摸索着记录了一下. 按照ButterKnife的官网描述,使用ButterKnife需要在Gradle中添加如下依赖: compile 'com ...

  9. JS正则表达式验证账号、手机号、电话、邮箱、货币

    验证帐号是否合法验证规则:字母.数字.下划线组成,字母开头,4-16位. function checkUser(str){ var re = /^[a-zA-z]\w{3,15}$/; if(re.t ...

  10. 谷歌插件postman如果不能用，就用git命令发送post请求

     curl -X POST --data '{"name":"zfpx"}' -H 'Content-Type:application/json' http:/ ...