jquery bascule faites glisser de la gauche vers la droite et à l'arrière

J'ai un bouton "Menu" sur le côté gauche de la page et une fois sélectionnée, j'ai un div contenant les éléments de menu à afficher. J'ai ensuite un autre bouton qui peut être sélectionné pour masquer le menu.

Idéalement, je veux ce à glisser (de gauche à droite) et en arrière, mais ont échoué dans l'obtention de ce travail. J'ai essayé à l'aide d'animer et de SlideToggle mais aucun ne fonctionnent bien pour ce que j'ai. Des conseils à donner?

<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();
});
Voici un bon tutoriel sur la façon de glisser learningjquery.com/2009/02/...
En cliquant sur #cat_icon permettra à la fois de masquer (avec bascule ()) #catégories et de la #cat_icon lui-même, est-ce le but de comportement?

OriginalL'auteur LeeTee | 2013-01-21

  1. 12

    Voir ceci: Démo

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

    Mise à jour : À glisser de gauche à droite: Demo2

    Note: Second utilise jquery-ui aussi

    ça glisse de haut en bas au lieu de gauche à droite.
    Voir mise à jour de réponse...

    OriginalL'auteur Anujith

  2. 6

    Cacher #categories initialement

    #categories {
    display: none;
}

    et puis, à l'aide de JQuery UI, animer la Menu lentement 

    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

    Vous pouvez utiliser tout le temps en millisecondes ainsi 

    var duration = 2000;

    Si vous voulez cacher sur class='panel_item' trop, sélectionnez les deux panel_title et panel_item 

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

    JSFiddle

    ça glisse de haut en bas au lieu de gauche à droite

    OriginalL'auteur Olaf Dietsche

  3. 4

    De glissement à partir de la droite:

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

    Faisant glisser vers la gauche:

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

    OriginalL'auteur Gedeon Tamsi

  4. 1

    Utiliser ce...

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

    Voir ce Exemple

    Salutations.

    ça glisse de haut en bas au lieu de gauche à droite

    OriginalL'auteur MG_Bautista