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()）

只要你点击按钮，它就会反转转换，但如果你只想要一个按钮，那就是解决方案。

DEMO

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);
    });
});

FIDDLE

修改

不确定我的问题是对的吗？如果你只是想尝试切换它，你可以这样做：

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

FIDDLE

Answer 4

您可以使用.slideUp和.slideDown方法与jQuery一起使用：

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

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

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

如何在JQuery动画中设置'auto'高度

4 个答案: