Jquery - 制表符 - 可折叠 - 动画过渡

Question

无法获得一组合作要求。

从基础JQuery UI演示开始： http://jqueryui.com/tabs/#collapsible 将Collapsible设置为True允许在单击活动tabheader时关闭选项卡 这工作得很好.....

我们需要在加载时关闭标签，因此添加了Active;假 这确实有效.....

现在，我们想添加一个转换，以便在更改标签时，它不是一个快速的不和谐变化，而是一个很好的平滑过渡。

正在发生的事情是，当选择另一个标签时，活动标签会在另一个标签打开时一直关闭。

是否有一种方法可以让面板动画化为新选择的面板的大小而不会一直关闭。

我意识到实际发生的事情是活动面板正在关闭，而另一个（单独的）面板正在打开。

所以我们使用的JQuery UI演示调整方法可能不是最好的方法。

寻求建议以达到上述目的。

感谢 -Dave

Answer 1

您需要使用

设置所选标签更改时的事件

$("#tabs").tabs({activate:function(){...}});

和$("#tabs")需要一个绝对高度，因此可以设置动画。

$( "#tabs" ).height($(ui.newPanel||ui.panel).height()+83);

有关工作示例，请参阅此JSFiddle。