高度切换动画 jQuery

Height toggle animation with jQuery

我只是在准备一些简单的工作演示,但我一直在使用 jQuery 的高度切换动画。

$('a.content-toggle').click(function() {
    var toggleHeight = $("#panel_1").height() == 500 ? "200px" : "500px";
    $("#panel_1").animate({ height: toggleHeight }); 
});

我知道 toggle 功能已弃用,所以我使用 click 来模拟切换。

如果我在 CSS 中设置 200px,我可以让面板增长到 500px,但是缩小到 200px 是行不通的。

这是我的 JS Fiddle 它是 ... 在触发切换的第一个面板中

问题是 box sizing, which is by default content-box 所以高度 属性 将排除填充和边框,所以 toggleHeight 将 return 466 而不是 500

var toggleHeight = $("#panel_1").outerHeight() == 500 ? "200px" : "500px";

演示:Fiddle