Question

请问下jQuery平滑改变元素高度的问题

$('.more').toggle(
function(){
$(".conbox").slideDown('slow',function(){
$(this).css({'height':'auto'});
})
},
function(){
$(".conbox").css({'height':h-180,'overflow':'hidden'});
}
)
这样写动画效果没有,突然就展开了.
我想要的效果是元素默认一个高度,比如200px,在鼠标点击触发器的时候把高度改变为默认,鼠标再次点击触发器的时候,高度变回默认,请问下应该怎么写呢?需要类似slideDown的那种效果.

Answer 1

    $(function() {
        $('#btn').click(function() {
            if($('#test').css('height') == $('#test_son').css('height')) {
                $('#test').css('height',10);
            }else{
                $('#test').css('height','auto');
            }
        });
    });

    <input id="btn" type="button" value="变长/变短" />
    <div id="test" style="width:200px; overflow:hidden;">
        <div id="test_son" style="background:red; height:200px; width:200px;"></div>
    </div>

追问

谢谢,你这种思路也不错,通过比较两DIV的高度来实现

Answer 2

$(".conbox").animate({"height" : h-180+"px"}, 500);

Answer 3

看来你jquery动画不过关，你去查看关于animate方法的使用，你要多平滑就有多平滑了，http://jquery.xiamiz.com/animated.html ，希望我的回答能帮助到你。