高度切换动画 jQuery

Question

我只是在准备一些简单的工作演示，但我一直在使用 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 它是 ... 在触发切换的第一个面板中

Answer 1

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

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

演示：Fiddle

高度切换动画 jQuery

Height toggle animation with jQuery

css

jquery

jquery-animate