点击扩展或缩小文本框效果代码:
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>点击扩展或缩小文本框效果代码-蚂蚁部落</title>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></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);
}
}
})
$('.smaller').click(function(){
if(!$comment.is(":animated")){
if( $comment.height() > 50 ){
$comment.animate({ height : "-=50" },400);
}
}
});
});
</script>
</style>
</head>
<body>
<textarea rows="10" cols="40" id="comment">请输入内容..</textarea>
<button class="bigger">点击放大</button><button class="smaller">点击缩小</button>
</body>
</html>
一.实现原理:
当点击按钮的时候通过animate()函数以动画的形式调整调整文本框的尺寸。尺寸不是随意调整的，而是设置了一个上线和下线，当超过上限，尺寸就不会再增加，当小于下限，尺寸也不会再减少。
二.代码注释:
1.$(function(){}，当文档结构加载完成之后再去执行函数中的代码。
2.var $comment = $('#comment'),获取文本框对象。
3.$('.bigger').click(function(){}，为class属性值为bigger的按钮绑定click事件处理函数。
4.if(!$comment.is(":animated")){}判断文本框是否处于动画状态。关于is()可以参阅 jQuery的is()方法。
5.if( $comment.height() < 500 ）{}，判断文本框高度是否小于500px，如果小于则会扩大尺寸。
6.$comment.animate({ height : "+=50" },400)，重新设置高度，在原有的基础上加50。
当点击按钮的时候通过animate()函数以动画的形式调整调整文本框的尺寸。尺寸不是随意调整的，而是设置了一个上线和下线，当超过上限，尺寸就不会再增加，当小于下限，尺寸也不会再减少。
二.代码注释:
1.$(function(){}，当文档结构加载完成之后再去执行函数中的代码。
2.var $comment = $('#comment'),获取文本框对象。
3.$('.bigger').click(function(){}，为class属性值为bigger的按钮绑定click事件处理函数。
4.if(!$comment.is(":animated")){}判断文本框是否处于动画状态。关于is()可以参阅 jQuery的is()方法。
5.if( $comment.height() < 500 ）{}，判断文本框高度是否小于500px，如果小于则会扩大尺寸。
6.$comment.animate({ height : "+=50" },400)，重新设置高度，在原有的基础上加50。