<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输入框放大缩小</title>
</head>
<body>
<form>
<div>
<span class="bigger">big</span>
<span class="smaller">small</span>
</div>
<div>
<textarea id="comment" rows="8" cols="20">
多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框
多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框
多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框
多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框
多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框
多行文本框多行文本框多行文本框多行文本框
多行文本框多行文本框多行文本框多行文本框多行文本框
多行文本框多行文本框多行文本框多行文本框多行文本框多行文本框
</textarea>
</div>
</form>
<script src="../libs/jquery.js"></script>
<script>
$(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>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<me
阅读背景：
jQuery-输入框大小变大变小（动画）
来源：互联网
分享到：
