<!DOCTYPE html>
<html lang="en">
<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;50px;height:20px;line-height:20px;text-align:center;color:#fff;background:#999;}
textarea{border:1px solid #000;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="" id="comment" cols="20" rows="8">多行文本框变化多行文本框变化多行文本框变化多行文本框变化多行文本框变化多行文本框变化多行文本框变化多行文本框变化多行文本框变化多行文本框变化</textarea>
</div>
</div>
</form>
</body>
</html>