zoukankan      html  css  js  c++  java
  • jquery animate函数实现

    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>
  • 相关阅读:
    [cocos2dx 3.0 + xcode]疑难点记录
    [转]全球付虚拟卡申请流程~
    [转]全球付虚拟卡申请开发者账号的流程~
    [cocos2d-x3.0]Android+NDK+Eclipse环境搭建及编译步骤~
    Torque2D MIT 学习笔记(27) ---- ImageFont的使用以及字体ImageAsset的工具生成
    关于拒绝测试驱动开发(NoTDD)
    工作两年随感
    一个Java应用,三种字体风格(Java, Windows, Mac),真是蛋疼
    看看这蛋疼的Java代码
    Bash实用技巧:同时循环两个列表
  • 原文地址:https://www.cnblogs.com/timelesszhuang/p/3678469.html
Copyright © 2011-2022 走看看