jQuery przełączają suwak od lewej do prawej iz powrotem

Question

Mam przycisk "Menu" po lewej stronie strony i po wybraniu mam element div zawierający elementy menu show. Następnie mam inny przycisk, który można wybrać, aby ukryć menu.

Idealnie chciałbym, żeby to się wysunęło (od lewej do prawej) iz powrotem, ale nie powiodło się, aby to działało dobrze. Próbowałem używać animacji i SlideToggle, ale żaden nie działa dobrze dla tego, co mam. Jakieś wskazówki?

<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

Zobacz to: Demo

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

Update: ślizgać się od lewej do prawej: Demo2

Uwaga: Druga używa jquery-ui także

Answer 2

Użyj tego ...

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

zobaczyć ten Example

życzenia.

Answer 3

Ukryj #categories początkowo

#categories { 
    display: none; 
} 

a następnie, przy użyciu jQuery UI, animowanie Menu powoli

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

Można stosować dowolny czas w milisekundach, a także

var duration = 2000; 

Jeśli chcesz ukryć na class='panel_item' też wybrać zarówno panel_title i panel_item

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

JSFiddle

Answer 4

przesuwne z prawej strony:

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

przesuwne z lewej strony:

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