web-dev-qa-db-fra.com

slideToggle JQuery droite à gauche

je suis nouveau dans JQ. J'ai ce script trouvé sur Internet et il fait exactement ce dont j'ai besoin, mais je veux que le glissement se fasse de droite à gauche. Comment puis-je le faire? s'il vous plaît aider

c'est le code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });

});

</script>
<style>

.slidingDiv {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}

.show_hide {
    display:none;
}
</style>
</head>

<body>

<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="show_hide">hide</a></div>
<a href="#" class="show_hide">Show/hide</a>
jquerytoggleright-to-left
20
benjo

Vous pouvez le faire en utilisant effets supplémentaires dans jQuery-ui

$('.show_hide').click(function () {
    $(".slidingDiv").toggle("slide");
});

lien de test

23
ta-run

Essaye ça:

$(this).hide("slide", { direction: "left" }, 1000);

$(this).show("slide", { direction: "left" }, 1000);

14
McCartney

S'il vous plaît essayez ce code

$(this).animate({'width': 'toggle'});
6
w3debugger

Je sais que cela fait un an que cette question a été posée, mais pour les personnes qui vont visiter cette page, je publie ma solution.

En utilisant ce que @Aldi Unanto a suggéré, voici une réponse plus complète:

  jQuery('.show_hide').click(function(e) {
    e.preventDefault();
    if (jQuery('.slidingDiv').is(":visible") ) {
      jQuery('.slidingDiv').stop(true,true).hide("slide", { direction: "left" }, 200);
    } else {
      jQuery('.slidingDiv').stop(true,true).show("slide", { direction: "left" }, 200);
    }
  });

D'abord, j'empêche le lien de faire quoi que ce soit au clic. Ensuite, j'ajoute une vérification si l'élément est visible ou non. Quand visible je le cache. Quand caché je le montre. Vous pouvez changer la direction à gauche ou à droite et la durée de 200 ms à celle que vous préférez.

Edit: j'ai aussi ajouté

.stop(true,true)

afin d'effacer la file d'attente et sauterToEnd. Lisez à propos de jQuery stop here

5
Spyros
$("#mydiv").toggle(500,"swing");
3
AlexanderPop

Je vous suggère d'utiliser le css ci-dessous

.showhideoverlay { 
  width: 100%;
  height: 100%;
  right: 0px;
  top: 0px;
  position: fixed;
  background: #000;
  opacity: 0.75;
}

Vous pouvez ensuite utiliser une simple fonction de basculement:

$('a.open').click(function() {
  $('div.showhideoverlay').toggle("slow");
});

Cela affichera le menu de superposition de droite à gauche. Alternativement, vous pouvez utiliser le positionnement pour changer l’effet du haut ou du bas, c’est-à-dire utiliser bottom: 0; au lieu de top: 0; - vous verrez le menu glisser du coin inférieur droit.

2
piyush singh

Essaye ça

$('.slidingDiv').toggle("slide", {direction: "right" }, 1000);
2
Souvik

inclure les plugins Jquery et Jquery UI et essayer ceci

 $("#LeftSidePane").toggle('slide','left',400);
1
Anbu