JQuery слайд - Div не скользят рядом друг с другом

Question

Я использую jQuery"s slide эффект для перехода между элементами. Проще всего показать вам jsfiddle

Ссылки меню ничего не делают. Если вы нажмете на ссылку "Подробности", вы увидите проблему. Я пытаюсь использовать "слайд", чтобы одновременно показывать новый div и скрывать старый - проблема в том, что новый div не скользит рядом со старым - он вставляется рядом и под ним, а затем внезапно появляется в правильном положении в конце анимации. Должно быть достаточно ясно, к какому эффекту я стремлюсь - я хочу, чтобы div-ы как бы "толкали" друг друга в сторону, как вы видели бы в слайд-шоу. Что я делаю неправильно:\

Я могу настроить CSS и / или разметку и / или JS по мере необходимости, чтобы сделать эту работу правильно.

Answer 1

Вы имеете в виду, как это?

jsFiddle

HTML:

<div id='container'>
    <a href='#' class='button'>Click</a>
    <div class='show left'>I'm showing!</div>
    <div class='hide right'>I was hidden, but now I showed.</div>
</div>

CSS:

.button{
    padding:5px;
    background:#eee;
    display:block;
    text-decoration:none;
    clear:both;
    text-align:center;
}
#container{
    width:350px;
    border:1px solid black;
}
#container:after{
    content:"";
    display:block;
    clear:both;
}
.left{
    float:left;
    padding:3px;
}
.right{
    float:right;
    padding:3px;
}
.hide{
    display:none;
}

Javascript:

$('.button').click(function(e){
    e.preventDefault();
    $('.left').toggle('slide',{'direction':'left'},500);
    $('.right').toggle('slide',{'direction':'right'},500);
});