文本框变大变小效果--jQuery
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.4.2.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>
span{display:inline-block;width:50px;height:20px;line-height:20px;text-align:center;color:#fff;background:#999;}
textarea{border:1px solid #000;width:300px;height:100px;}
</style>
</head>
<body>
<form action="">
<div class="message">
<div class="cap_aption">
<span class="bigger">向上</span>
<span class="smaller">向下</span>
</div>
<div>
<textarea name="" >多行文本框变化多行文本框变化多行文本框变化多行文本框变化多行文本框变化多行文本框变化多行文本框变化多行文本框变化多行文本框变化多行文本框变化</textarea>
</div>
</div>
</form>
</body>
</html>