jQuery Slide Right/Left

Question

I have the following JS:

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

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).

Thanks

Answer 1

Do you know the width of the left column, the one that shows/hides? If yes, you could set position:absolute on the middle column and then animate its "left" value together with sliding the left column. Do I make sense?

EDIT: I believe the problem is due to float:left on the middle column. If the left column wouldn't be there, the middle column would be displayed on the most left. So, while the animation lasts, it thinks of the left column as if it's there. Once the animation is done, the left column is hidden, elements get realigned and you get the snapping effect.

So, assuming your mark up is something like this:

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

Now in your javascript for showing:

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

and for hiding:

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

So while animating the hide of the left column, you're also animating the position of your middle column. (I'm confused on why you're animating direction: "left" in both hide and show. Shouldn't on show be animating direction: "right"?)