<html>
<title>无标题文档</title>
<script  type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >
var $comment=$("#comment");
$(function(){
$("#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 type="text/css">
textarea{
width:300px;
height:100px;
border:1px solid;


}
</style>
</head><body>
<form >
<input type="button" value="放大" id="bigger"/>
<input type="button" value="缩小" id="smaller"/><br/>
<textarea rows="8" cols="20" id="comment">
</textarea>
</form>
</body>
</html>

解决方案 »

  1.   

    <script type="text/javascript" >
    $(function(){
        var $comment=$("#comment");//变量放进来
        $("#bigger").click(function(){
            if(!$comment.is(":animated")){
                if($comment.height()<500){//是height(),少了括号
                    $comment.animate({height: "+=50"},400);//是+=50,才会自增50高度,下面的也一样
                }
            }
        });
        $("#smaller").click(function(){
            if(!$comment.is(":animated")){
                if($comment.height()>50){
                    $comment.animate({height: "-=50"},400);
                }
            }
        });
    });
    </script>
      

  2.   

    而且,
    if(!$comment.is(":animated")){
    可以写成
    if($comment.not(":animated")){
      

  3.   

    想问您一下
    1)if(!$comment.is(":animated")){}这个函数要怎么理解呢?
    2)为什么他的滚动条在缩小放大的过程中总是消失出现呢?
    嘿嘿~~谢谢
      

  4.   

    1)if(!$comment.is(":animated")){}
    $comment.is(":animated")这是jquery中用来判断当前对象是否正在执行动画的,如果是返回true,否则返回false
    加上了!,也就是结定条件为:当前对象目前没有在执行动画时,执行以下操作。以避免动画动作重复
    等值于:if($comment.not(":animated")){//这句就直白点,就是$comment没有在执行动画时,执行以下操作2)为什么他的滚动条在缩小放大的过程中总是消失出现呢?
    也不是总是消失出现吧。只是动画开始时消失,动画结束时恢复;因为当前动画正在增加它的高度吧,如果设置样式 style="overflow:hidden" 时就看不到滚动条了