O método .toggle()
faz a div
aparecer/desaparecer, é melhor usar o método .animate()
e animar a margin-left
por exemplo. A largura (width
) poderia também ser uma alternativa.
Assim para poder fechar e voltar a abrir podes usar uma flag. Uma flag é uma variável útil para saber o estado do elemento.
Neste caso uso-o para guardar informação sobre se está aberto ou fechado. Esta flag no primeiro exemplo é uma variável global, no segundo exemplo está guardada dentro de um campo data
do próprio elemento.
Assim a cada clique ele vai verificar com um operador ternário se a flag open
tem o valor true
ou false
e consoante isso retornar "-250px"
(caso open
for true
) ou "0px"
(caso open
for false
):
var open = true;
$(document).click(function () {
$("#toggle").animate({
'margin-left': open ? "-250px" : "0px"
}, 500);
open = !open; // mudar a flag para o oposto do que estava usando o operador de negação "!"
});
Outra alternative é ter um campo data no elemento que guarda esta flag sobre estar aberto ou não:
HTML
<div id="toggle" data-open="true"></div>
JS
$(document).click(function () {
var elemento = $("#toggle");
elemento.animate({
'margin-left': elemento.data('open') ? "-250px" : "0px"
}, 500);
// mudar a flag para o oposto do que estava usando o operador de negação "!"
elemento.data('open', !elemento.data('open'));
});
O terceiro exemplo (e talvez melhor) é usando uma classe e transições CSS:
CSS
#toggle {
width: 300px;
height:300px;
background: #ccc;
-webkit-transition: margin-left 500ms ease;
-moz-transition: margin-left 500ms ease;
-ms-transition: margin-left 500ms ease;
-o-transition: margin-left 500ms ease;
transition: margin-left 500ms ease;
}
.toggle {
margin-left: -250px
}
JS
$(document).click(function() {
var $toggle = $("#toggle");
if ($toggle.hasClass('toggle')) $toggle.removeClass('toggle');
else $toggle.addClass('toggle');
});