imitar o comportamento slide / animate de uma gaveta sendo aberta / fechada - jquery, html, css, html5, jquery-ui

Esta é a caneta que criei: http://codepen.io/helloworld/pen/ogwqpX?editors=101

Antes de clicar na seta laranja div, defini a id = "sidebar" para exibir: none;

Quando você clica na seta laranja div, ela se move 200px para o lado esquerdo e a propriedade de exibição da barra lateral é definida como "auto".

A animação inteira não é o que eu quero.

Eu quero que todo o sidebarContainer + osidebarHandle / sidebar move-se para o lado esquerdo em 200px a partir da localização do sidebarHandle. No momento em que a animação começa do lado direito da barra lateral, a animação parece ruim.

Como posso obter o comportamento do flyout / gaveta sendo aberto e fechado?

HTML

<div  id="view" style="height:400px;">
<div style="height:100%;background:black;" class="col-xs-3">
column 3
</div>
<div style="height:100%;background:red;" class="col-xs-4">
column 4
</div>
<div id="availableSidebarColumn" style="padding:0;background:yellow;height:100%;" class="col-xs-1">

<div class="sidebarClosed" id="sidebarContainer" style="position:absolute;z-index:10; display:table;height:100%;width:30px;background:green;">

<div  id="sidebarHandle" style="border:1px solid black;cursor:pointer;background-color: orange;width:100%;display: table-cell;height:100%;vertical-align: middle;font-size:32px;" class="text-center glyphicon glyphicon-chevron-left">
</div>

<div id="sidebar" style="display:none;border:1px solid black;background:orange;height:100%;width:200px">
<div style="background:lightblue;height:10%;">navigation</div>
<div style="background:lightgreen;height:90%;">content</div>
</div>
</div>

</div>
<div style="height:100%;background:pink;" class="col-xs-4">
column 4
</div>
</div>

CSS

*{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;
}

JS

 $(function () {
$("#view").height(400);

$("#sidebarHandle").click(function () {

$("#sidebarHandle").toggleClass("glyphicon-chevron-right glyphicon-chevron-left");
$("#sidebarContainer").animate({right:"200px"},350); // 200px is the width of the sidebar
$("#sidebar").css("display", "auto");

});
});

Respostas:

2 para resposta № 1

Se eu entendi corretamente, quando você clica nesse identificador, algumas coisas devem deslizar da esquerda para a direita e vice-versa quando você clica nele novamente.

• remova o visor nenhum do #sidebar
• algum css extra irá lidar com sua visibilidade, largura: 0 + estouro: oculto
• defina um toggleClass entre quando é aberto, para width: largura necessária, e quando estiver fechado, volte para width: 0;
• e é sobre isso.

Talvez isso possa ser feito via js, como animar essa largura, em um certo período de tempo, eu usei transition prop para animá-lo.

Eu adicionei o CSS extra usado, na aba css, você pode conferir o demonstração aqui e espero que isso ajude você

---

Ok, desde que você saiba a largura da gaveta ea largura do gatilho, você pode definir uma largura para o seu contêiner. Dada esta situação, eu mudei um pouco do seu CSS original, para a posição absoluta, tanto para o gatilho quanto para a gaveta, para que eu pudesse animar a largura, ou esquerda / direita, mais facilmente.

Eu fiz 2 exemplos para ilustrar este exemplo,Espero que desta vez eu tenha acertado :) A estrutura de marcação é basicamente a mesma, apenas os nomes id / class diferem (os nomes id eram muito longos para manter o controle de quem e o que está fazendo).

Confira a demos aquie deixe-me saber como vai.

---

Atualizar v3

A gaveta foi empurrada para a direita, porque no meu exemplo original, eu defini algumas margens entre essas 2 gavetas, para entender melhor o que está acontecendo.

Agora, para as questões do z-index, bem, é bonitosimples, como a gaveta foi empurrada 200px para a direita, ela teria caído abaixo de seu irmão adjacente, então você tinha que adicionar algum z-index para inverter sua ordem.

Além disso, a gaveta tinha alguma largura estáticapense 200 algo px), no entanto, se você quiser que ele seja contido dentro de seu pai, você pode obter a largura dos pais, o conjunto para a gaveta e deve ser ok.

Confira a caneta nova aqui

---