jquery切换从左到右滑动

Question

我在页面的左侧有一个"菜单"按钮,一旦选中,我有一个包含菜单项显示的div.然后我有另一个按钮可以选择隐藏菜单.

理想情况下,我希望它能够(从左到右)向后滑动,但却没有成功地使其正常工作.我已经尝试过使用animate和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

见:演示

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

更新:从左向右滑动:Demo2

注意:第二个也使用jquery-ui

Answer 2

#categories最初隐藏

#categories {
    display: none;
}

然后,使用JQuery UI,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;

如果你也想隐藏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 3

从右边滑动:

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

滑到左边:

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