如何在jQuery动画中设置“自动”高度

Question

问题：我有一个固定宽度的盒子（div），但高度（自动）未知。

我需要使用JQuery动画功能打开/关闭该框。

问题是在Open事件上（也已在代码中注释），我需要设置自动高度，但我不能这样做。 有人可以帮忙将高度设置为自动吗？

JSFiddle： http : //jsfiddle.net/7m5Qa/下面也给出了代码：

的HTML

<button id="open">open</button>
<button id="close">close</button>
<div id="textselector-body">
    a<br/>
    b<br/>
    c<br/>
</div>​

Java脚本

$(document).ready(function(){
    $("#open").click(function(){
        $("#textselector-body").animate({
            height:'100px' //here is problem. I need it 'auto'.
        },2000);
    });
    $("#close").click(function(){
        $("#textselector-body").animate({
            height:'0'
        },2000);
    });
});​

Answer 1

您是否尝试过slideDown和slideUp？ ：

$(document).ready(function(){
    $("#open").click(function(){
        $("#textselector-body").slideDown(2000);
    });
    $("#close").click(function(){
        $("#textselector-body").slideUp(2000);
    });
});​

jsFiddle： http : //jsfiddle.net/7m5Qa/2/

Answer 2

您是否尝试过height:'toggle' ？ （ JQuery.animate（） ）

每次您单击按钮时，它都会颠倒转换，但是，如果只需要一个按钮，那就是解决方案。

演示

Answer 3

$(document).ready(function(){
    var H = $("#textselector-body").height();
    $("#open").click(function(){
        $("#textselector-body").animate({
            height:'100px'
        },2000);
    });
    $("#close").click(function(){
        $("#textselector-body").animate({
            height:H
        },2000);
    });
});​

小提琴

编辑：

不确定我的问题对吗？ 如果您只是想切换它，则可以执行以下操作：

$(function(){
    $("#open, #close").click(function(e){
        $("#textselector-body")[e.target.id=='open'?'slideDown':'slideUp'](2000);
    });
});​

小提琴

Answer 4

您可以在jQuery中使用.slideUp和.slideDown方法：

$("#open").click(function(){
        $("#textselector-body").slideDown('slow')
});

    $("#close").click(function(){
        $("#textselector-body").slideUp('slow')
});

http://jsfiddle.net/Kyle_Sevenoaks/7m5Qa/3/