jquery左から右にスライドを切り替える

Question

ページの左側に「メニュー」ボタンがあり、一度選択するとメニュー項目が表示されます。その後、メニューを非表示にするために選択できる別のボタンがあります。

理想的には、これを（左から右に）スライドさせて戻したいが、これをうまく機能させるにはうまくいかない。私はアニメートとSlideToggleを使用しようとしましたが、私は何もうまく動作しません。任意のヒント？

<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

これを参照してください選択して左から右にスライドさせ：Demo2を

注：

左にスライド

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

：：2つ目は右からスライドも

Answer 2

使用この...

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

このExample

挨拶を参照してください。 jQueryのUIを使用して、その後、当初

#categories { 
    display: none; 
} 

と、

Answer 3

隠す#categoriesは、Menuゆっくり

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

は、あなたが同様にミリ秒単位で任意の時間

var duration = 2000; 

を使用することができますアニメーション

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

更新：あなたはあまりにもclass='panel_item'上で非表示にする場合

は、両方panel_titleとpanel_item

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

JSFiddle

Answer 4

をjqueryの-UIを使用しています。ここ

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