Ищу для достижения конкретной анимации с помощью jquery

Question

У меня есть страница, где у меня есть 3 div. один из них - основной div, а другие 2 - позиция дочернего div в main div. один дочерний div называется левым div, а другой дочерний div называется правым div. здесь я вставляю изображение, в результате люди могут видеть, какой результат я ищу.

Предположим, у меня есть две кнопки с названием "Показать и скрыть". когда я нажму на кнопку "показать", то div будет сгенерирован динамически и появится с эффектом слайда, таким как слайд к левой стороне правого div, и закроет правый div, как наложение, и таким же образом, когда я нажму на кнопку "hide", динамический оверлейный div будет сдвиньте вправо и откройте правый div. поэтому я много искал в Google что-то похожее, но все равно ничего не получил. было бы здорово помочь, если бы кто-то помог мне сделать это.

Спасибо

редактировать

благодаря @Jamie Barker.he предоставляет пример кода, который близок к моему требованию. здесь я вставляю его код

<div id="main">
    <div id="left">

    </div>
    <div id="right">

    </div>
</div>
<span id="animate">Click me to Animate</span>

#main {
    width:400px;
    padding:5px;
    box-sizing:border-box;
    border:1px solid #000;
    position:relative;
    height:200px;
    float:left;
    clear:left;
}
#main > div {
    width:calc(50% - 10px);
    border:1px solid #000;
    position:absolute;
    box-sizing:border-box;
    height:calc(100% - 10px);
}
#main #left {
    left:5px;   
    background:red;
    opacity:0.5;    
}
#main #right {
     right:5px;   
    background:yellow;
    opacity:0.5;    
}
#animate {
    margin:10px 0 0 0;
    float:left;
    clear:left;
    background:#666;
    cursor:pointer;
    color:#fff;
    padding:2px 5px;
    border:1px solid #000;
}

$('#animate').click(function() {
    if ($('#left').css('left')==='5px') {  
        $('#left').css({'z-index':'1000'});
        $('#left').animate({
            left: $('#right').offset().left - 10
        }, 500, function() {
            console.log('moved right');    
        });
    } else {
        $('#left').animate({
            left: '5'
        }, 500, function() {
            console.log('moved left');    
        });        
    }
});

Ссылка на jsfiddle: http://jsfiddle.net/wswb2v1t/8/

если кто-нибудь запустит код, то он / она увидит, что div левой стороны скользит вправо и закроет правый div, но это не мое требование. я хочу, чтобы div генерировался динамически на правой стороне и скользил влево только для того, чтобы покрыть правую сторону div. Как изменить приведенный выше код добиться того же.

Спасибо

Answer 1

Если вы используете JQuery, вы можете использовать JQuery UI, чтобы добавить больше эффектов замедления для функции animate, которая должна делать то, что вы ищете:

http://api.jqueryui.com/easings/

http://api.jquery.com/animate/