jquery sposta la diapositiva da sinistra a destra e indietro

Question

Ho un pulsante "Menu" sul lato sinistro della pagina e una volta selezionato, ho un div che contiene le voci del menu. Poi ho un altro pulsante che può essere selezionato per nascondere il menu.

Idealmente, voglio che questo scivoli fuori (da sinistra a destra) e indietro, ma non ha funzionato correttamente. Ho provato ad usare animate e SlideToggle ma nessuno funziona bene per quello che ho. Qualche consiglio?

<div id="cat_icon">Menu</div> 
<div id="categories"> 
    <div CLASS="panel_title">Menu</div> 
    <div CLASS="panel_item"> 
     <template:UserControl id="ucCategories" src="UserControls/ProductCategories.ascx" /> 
    </div> 
</div> 

$('#cat_icon').click(function() { 
    $('#categories').toggle(); 
    $('#cat_icon').hide(); 
}); 
$('.panel_title').click(function() { 
    $('#categories').toggle(); 
    $('#cat_icon').show(); 
}); 

Answer 1

vedere questo: Demo

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

Aggiornamento: Per scorrere da sinistra a destra: Demo2

Nota: seconda utilizza jQuery-ui anche

Answer 2

Utilizzare questo ...

$('#cat_icon').click(function() { 
    $('#categories').toggle("slow"); 
    //$('#cat_icon').hide(); 
}); 
$('.panel_title').click(function() { 
    $('#categories').toggle("slow"); 
    //$('#cat_icon').show(); 
}); 

vedere questo Example

Saluti.

Answer 3

Nascondi #categories inizialmente

#categories { 
    display: none; 
} 

e poi, utilizzando jQuery UI, animano la Menu lentamente

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

è possibile utilizzare qualsiasi tempo in millisecondi, così

var duration = 2000; 

Se si desidera nascondere il class='panel_item' troppo, selezionare sia panel_title e panel_item

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

JSFiddle

Answer 4

scorrevole da destra:

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

scorrevole a sinistra:

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