jquery - 使用jQuery的高度切换动画

我只是在准备一些简单的演示工作，并且停留在jQuery的高度切换动画上。

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

我了解不推荐使用toggle函数，因此我正在使用click模拟切换。

如果在CSS中设置200px，但缩小到200px无法正常工作，则可以使面板增加到500px。

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

最佳答案

问题是box sizing，默认情况下为content-box，因此height属性将排除填充和边框，因此toggleHeight将返回466而不是500

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

演示：Fiddle