Question

我正在尝试使用幻灯片过渡折叠垂直左侧栏。我从较大的宽度（250px）开始，一直到较小的宽度（50px）工具栏大小。

我可以使用以下方法完美地隐藏/显示宽条：

$("#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"); });
}

有什么想法吗？

jQuery隐藏具有幻灯片切换的类

0 个答案: