代码驿站移动版
频道导航
HTML/Xhtml
CSS
JavaScript
HTML5
PHP教程
ASP.NET
正则表达式
AJAX
ThinkPHP
Yii
MySQL
MariaDB
Oracle
MongoDB
Redis
DedeCMS
PHPCMS
帝国CMS
WordPress
Discuz
其它CMS
Zend Studio
Sublime
Notepad
Dreamweaver
Windows
Linux
Nginx
Apache
IIS
CentOS
Ubuntu
Debian
网站优化
工具资源
PHP源码
ASP.NET源码
其它源码
图标素材
按钮素材
字体素材
DedeCMS模板
帝国CMS模板
PHPCMS模板
WordPress模板
Discuz!模板
单页模板
开发软件下载
服务器软件下载
广告投放
联系我们
版权申明
软件编程
网页前端
移动开发
数据库
服务器
脚本语言
PHP代码
JAVA代码
Python代码
Android代码
当前位置:
主页
>
网页前端
>
jquery
>
jquery 动态调整textarea高度
时间:2021-01-26 15:25:44 | 栏目:
jquery
| 点击:次
脚本之家修正版本,运行后需要刷新下,因为jquery是外部调用的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery事件,动画1</title> <style type="text/css"> <!-- #Control { width:100px; background-color:Red; margin:0; cursor:pointer; } --> </style> <script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript"><!-- $(function(){ var $Content=$("#content"); $("#big").bind("click",function(){ //判断big为span的标签是否正在进行动画效果 if(!$Content.is("animated")) { if($Content.height()<400) { //高度累加,隔0.4秒执行animate $Content.animate({height:"+=50"},400) } } }); $("#smalll").bind("click",function(){ if($Content.height()>50) { $Content.animate({height:"-=50"},400) } }) }) // --> </script> </head> <body> <div id="v_show"> <div id="Control"> <span id="smalll">缩小</span> <span id="big">放大</span> </div> <div> <textarea id="content" rows="8" cols="50"> 香港、旧金山、台湾、3地7年深度访谈,50余幅经典珍藏海报及剧照,林青霞口中的林青霞,名人好友眼中的大明星、邻家女孩;最善良、最勤奋的亚洲第一美女……跨越国界的铁杆粉丝、日裔资深记者亲访林青霞好友及资深影人徐克夫妇、郁正春、宋存寿、赖声川、杜可风、许鞍华、王晶、张国荣、琼瑶等,完整呈现"亚洲第一美女"林青霞22年、100部华文经典电影的台前幕后及其半息影后的隐秘生活。脚本之家是一个专业的收集各类脚本学习资料的网站,尽量修正错误打造精品脚本类学习网站,我们为大家游戏脚本资源,源码,软件,asp,php,javascript等编程资料,是网页制作,网络编程,网站建设人士的聚集场所。www.jb51.net 香港、旧金山、台湾、3地7年深度访谈,50余幅经典珍藏海报及剧照,林青霞口中的林青霞,名人好友眼中的大明星、邻家女孩;最善良、最勤奋的亚洲第一美女……跨越国界的铁杆粉丝、日裔资深记者亲访林青霞好友及资深影人徐克夫妇、郁正春、宋存寿、赖声川、杜可风、许鞍华、王晶、张国荣、琼瑶等,完整呈现"亚洲第一美女"林青霞22年、100部华文经典电影的台前幕后及其半息影后的隐秘生活。</textarea></body></html>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
上面的难点就在于
$Content.animate({height:"+=50"},400)
每400毫秒递增50高度。
您可能感兴趣的文章:
jQuery响应鼠标事件并隐藏与显示input默认值
jquery调用asp.net 页面后台的实现代码
php结合imgareaselect实现图片裁剪
jQuery判断当前点击的是第几个li的代码
jquery选择符快速提取web表单数据示例
相关文章
01-04
jQuery实现的产品自动360度旋转展示特效源码分享
10-21
jquery层级选择器(匹配父元素下的子元素实现代码)
10-11
jquery判断类型是不是number类型的实例代码
10-11
javascript trim函数在IE下不能用的解决方法
12-05
Jquery日期选择datepicker插件用法实例分析
JQuery
VUE
AngularJS
MSSql
MySQL
MongoDB
Redis
Linux
Tomcat
Nginx
网站首页
广告投放
联系我们
版权申明
联系站长