JQuery слайд вправо/влево

Question

У меня есть следующие 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; 
    }); 

Который в основном показывает и скрывает DIV с классом LeftColumn. Проблема в том, что LeftColumn плавает влево, и у меня есть другой div, называемый Middle Column, который плавает слева рядом с ним. Но когда я делаю анимацию, LeftColumn делает приятный слайд слайдов, но MiddleColumn будет входить и выходить, чтобы заполнить пустоту. Как я могу получить MiddleColumn для облегчения вперед и назад по отношению к LeftColumn (имея в виду, что MiddleColumn не имеет определенной ширины).

Благодаря

Answer 1

вы знаете ширину левой колонки, тот, который показывает/скрывает ли? Если да, вы можете установить положение: абсолютное в среднем столбце, а затем оживить его «левое» значение вместе с сдвигом левого столбца. Имею ли я смысл?

EDIT: Я считаю, что проблема связана с поплавком: слева на средней колонке. Если левого столбца не будет, средний столбец будет отображаться слева. Таким образом, пока анимация длится, она думает о левом столбце, как будто это там. Как только анимация будет выполнена, левый столбец будет скрыт, элементы будут перестроены, и вы получите эффект привязки.

Таким образом, предполагается, что ваши наценки что-то вроде этого:

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

Теперь в вашем JavaScript для показа:

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

и для сокрытия:

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

Так при анимации Скрыть левый столбец, вы также оживляете позицию своего среднего столбца. (Я смущен тем, почему вы оживляете направление: «слева» и в спрятанном, и в шоу. Не следует показывать анимацию направления: «право»?)