jQuery幻灯片右/左

我有以下几点：

$(document).ready(function () {
    $(".LeftColumn").hide();
    $(".SidebarToggle").toggle(function () {
        $(this).addClass("active");
        $(this).text("Hide Sidebar");
        $(this).attr("title", "Hide Sidebar");
        //$(".LeftColumn").fadeIn("fast");
        $(".LeftColumn").show("slide", { direction: "left" }, 100);
        return false;
    },
    function () {
        $(this).removeClass("active");
        $(this).text("Show Sidebar");
        $(this).attr("title", "Show Sidebar");
        //$(".LeftColumn").fadeOut("fast");
        $(".LeftColumn").hide("slide", { direction: "left" }, 100);
        return false;
    });

它基本上显示和隐藏一个带有LeftColumn类的div。我遇到的问题是LeftColumn向左浮动，而我有另一个名为Middle Column的div在它旁边向左浮动。但是当我做动画的时候，左列做了一个很好的缓和滑动，但是中间列会弹入和弹出来填补空白。如何使中间柱相对于LeftColumn来回移动（请记住中间柱没有定义的宽度）

---

谢谢

您知道显示/隐藏的左列的宽度吗？如果是，可以在中间列上设置position:absolute，然后在滑动左列的同时设置其“left”值的动画。我说得通吗

编辑：我认为问题是由于中间一栏的float:left造成的。如果左边的列不在那里，中间的列将显示在最左边。因此，当动画持续时，它认为左边的列就好像它在那里一样。动画完成后，左栏将隐藏，元素将重新对齐，并获得捕捉效果

所以，假设你的加价是这样的：

<div style="position:relative;">
  <div class="LeftColumn" style="float:left;"></div>
  <div class="MiddleColumn" style="position:absolute;left:200px;"></div>
</div>

至于隐藏：

$(".LeftColumn").hide("slide", { direction: "left" }, 100);
$(".MiddleColumn").animate({'left': '0'}, 100);

---

因此，在为左栏的隐藏设置动画的同时，也为中栏的位置设置动画。（我不明白为什么要在“隐藏”和“显示”中设置方向动画：“左”。在“显示”中不应该设置方向动画：“右”？）

左栏宽200像素。你能分享一些示例代码吗？谢谢，代码很好用。唯一的问题是“绝对”会破坏布局，而且中间列的宽度保持不变，即使它现在滑回原位时占用了更多的屏幕空间。@Cameron-如果不看到整个标记，很难给出一个好的解决方案。也可以设置中间列宽度的动画。虽然，我想你说你没有它的确切价值。同样，当左列展开时，您可以获取中间列的宽度。然后在隐藏左列时，将中间列的宽度设置为[stored value]+200如果您使用js小提琴，我很乐意帮助您：-）

$(".LeftColumn").hide("slide", { direction: "left" }, 100);
$(".MiddleColumn").animate({'left': '0'}, 100);