jquery - 带有幻灯片过渡的 jQuery 隐藏类

Question

我正在尝试折叠带有幻灯片过渡的垂直左栏。我从较大的宽度（250 像素）开始，到较小的宽度（50 像素）工具栏尺寸。

我可以使用漂亮的幻灯片过渡完全隐藏/显示宽条：

$("#pnlLeftSide").hide('slide', {direction:'left'}, 300);
$("#pnlLeftSide").show('slide', {direction:'left'}, 300);

或者我可以添加一个从宽到小的类，它基本上隐藏了很多内部内容，然后使用以下方法显示一些较小的工具栏类型的东西：

$("#pnlLeftSide").toggleClass("min");

但是我不能从宽到小，因为它在大小（宽度）上折叠时具有很好的平滑滑动过渡。

如果我尝试这个，它会在最后改变可见性时猛拉：

if ($("#pnlLeftSide").hasClass("min")) {
    $("#pnlLeftSide").show('slide', {direction:'left'}, 300, function() { $(this).removeClass("min"); });
}
else {
    $("#pnlLeftSide").hide('slide', {direction:'left'}, 300, function() { $(this).show().addClass("min"); });
}

有任何想法吗？