web-dev-qa-db-ja.com

jqueryトグルスライドを左から右へ、そして後ろへ

ページの左側に「メニュー」ボタンがあり、選択すると、メニュー項目を含む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();
});
jqueryjquery-animatetoggle
11
LeeTee

こちらをご覧ください： デモ

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

更新：左から右にスライドするには： Demo2

注：2番目はjquery-uiも使用します

15
Anujith

右からスライドする：

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

左にスライド：

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

最初に#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

6
Olaf Dietsche

これを使って...

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

こちらをご覧ください 例

ご挨拶。

1
MG_Bautista