请问我这代码有什么问题？为什么实现不了？

江湖小迷童 2012-09-17 02:40:04

<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>

...全文

144 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

拼命二郎 2012-09-17

打赏
举报

感谢灰常之

泡泡鱼_ 2012-09-17

打赏
举报

1）if(!$comment.is(":animated")){}
$comment.is(":animated")这是jquery中用来判断当前对象是否正在执行动画的，如果是返回true，否则返回false
加上了!，也就是结定条件为：当前对象目前没有在执行动画时，执行以下操作。以避免动画动作重复
等值于：if($comment.not(":animated")){//这句就直白点，就是$comment没有在执行动画时，执行以下操作

2）为什么他的滚动条在缩小放大的过程中总是消失出现呢？
也不是总是消失出现吧。只是动画开始时消失，动画结束时恢复；因为当前动画正在增加它的高度吧,如果设置样式 style="overflow:hidden" 时就看不到滚动条了

拼命二郎 2012-09-17

打赏
举报

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

泡泡鱼_ 2012-09-17

打赏
举报

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

wei395107171 2012-09-17

打赏
举报

jquery不是太懂，帮顶

泡泡鱼_ 2012-09-17

打赏
举报

<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>