jQuery Slide Right/Left
<p>I have the following JS:</p>

<pre><code>$(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;
    });
</code></pre>

<p>Which basically shows and hides a div with a class of LeftColumn. The problem I have is that LeftColumn floats left and I have another div called Middle Column that floats left next to it. But when I do the animation the LeftColumn does a nice easing slide but the MiddleColumn will snap in and out to fill the void. How can I get the MiddleColumn to ease back and forth in relation to the LeftColumn (baring in mind that the MiddleColumn has no defined width).</p>

<p>Thanks</p>
