web-dev-qa-db-fra.com

glissière à bascule jquery de gauche à droite et en arrière

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

Idéalement, je veux que cela glisse (de gauche à droite) et en arrière, mais je n'ai pas réussi à bien le faire fonctionner. J'ai essayé d'utiliser animate et SlideToggle mais aucun ne fonctionne bien pour ce que j'ai. Des conseils?

<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

Voir ceci: Démo

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

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

Remarque : le second utilise également jquery-ui

15
Anujith

Glissant de droite:

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

Glissant vers la gauche:

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

Cacher #categories initialement

#categories {
    display: none;
}

puis, à l'aide de l'interface utilisateur JQuery, animez lentement le 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

Vous pouvez également utiliser à tout moment en millisecondes

var duration = 2000;

Si vous voulez vous cacher sur class='panel_item' aussi, 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

6
Olaf Dietsche

Utilisez ceci...

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

Voir ceci Exemple

Salutations.

1
MG_Bautista