jQuery jquery从左到右和向后切换滑动

jquery toggle slide from left to right and back

提问by LeeTee

I have a "Menu" button on the left hand side of the page and once selected I have a div containing the menu items show. I then have another button that can be selected to hide the menu.

我在页面的左侧有一个“菜单”按钮，一旦选择，我就有一个包含菜单项显示的 div。然后我可以选择另一个按钮来隐藏菜单。

Ideally I want this to slide out (from left to right) and back but have been unsuccessful in getting this working well. I have tried using animate and SlideToggle but none work well for what I have. Any tips?

理想情况下，我希望它滑出（从左到右）并返回，但未能成功使其正常工作。我曾尝试使用 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();
});

回答by Anujith

See this: Demo

看这个：演示

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

Update : To slide from left to right: Demo2

更新：从左向右滑动：Demo2

Note: Second one uses jquery-ui also

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

回答by Gedeon Tamsi

Sliding from the right:

从右侧滑动：

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

Sliding to the left:

向左滑动：

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

回答by Olaf Dietsche

Hide #categoriesinitially

#categories最初隐藏

#categories {
    display: none;
}

and then, using JQuery UI, animate the Menuslowly

然后，使用 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

JSFiddle

You can use any time in milliseconds as well

您也可以以毫秒为单位使用任何时间

var duration = 2000;

If you want to hide on class='panel_item'too, select both panel_titleand panel_item

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

JSFiddle

回答by MG_Bautista

Use this...

用这个...

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

See this Example

看这个例子

Greetings.

你好。