jquery alternar diapositiva de izquierda a derecha y atrás

Solución:

Ver esto: Demo

$('#cat_icon,.panel_title').click(function () {
   $('#categories,#cat_icon').stop().slideToggle('slow');
});

Actualización: para deslizar de izquierda a derecha: Demo2

Nota: El segundo también usa jquery-ui

Deslizándose desde la derecha:

$('#example').animate({width:'toggle'},350);

Deslizándose hacia la izquierda:

$('#example').toggle({ direction: "left" }, 1000);

Esconder #categories inicialmente

#categories {
    display: none;
}

y luego, usando JQuery UI, anime el Menu despacio

var duration = 'slow';

$('#cat_icon').click(function () {
    $('#cat_icon').hide(duration, function() {
        $('#categories').show('slide', {direction: 'left'}, duration);});
});
$('.panel_title').click(function () {
    $('#categories').hide('slide', {direction: 'left'}, duration, function() {
        $('#cat_icon').show(duration);});
});

JSFiddle

También puede usar cualquier tiempo en milisegundos

var duration = 2000;

Si quieres esconderte en class="panel_item" también, seleccione ambos panel_title y panel_item

$('.panel_title,.panel_item').click(function () {
    $('#categories').hide('slide', {direction: 'left'}, duration, function() {
        $('#cat_icon').show(duration);});
});

JSFiddle

---

---

Utiliza Nuestro Buscador