web-dev-qa-db-fra.com

Glisser de droite à gauche?

Comment puis-je faire passer une div de collapsed à expand (et vice versa), mais de droite à gauche?

Presque tout ce que je vois là-bas est toujours de gauche à droite.

jquerycssjquery-uiposition
369
Ryan Montgomery
$("#slide").animate({width:'toggle'},350);

Référence: https://api.jquery.com/animate/

354
JQGeek

Cela peut être réalisé en mode natif à l’aide des méthodes de masquage/d’exposition de jQueryUI .

    // To slide something leftwards into view,
    // with a delay of 1000 msec
    $("div").click(function () {
          $(this).show("slide", { direction: "left" }, 1000);
    });

Référence: http://docs.jquery.com/UI/Effects/Slide

225
EnGassa

Utilisez ceci:

$('#pollSlider-button').animate({"margin-right": '+=200'});

Démo en direct

Version améliorée

Du code a été ajouté à la démo pour éviter la double marge sur un double clic: http://jsfiddle.net/XNnHC/942/

Utilisez-le avec soulagement;)

http://jsfiddle.net/XNnHC/1591/

  • Codes JavaScript supplémentaires supprimés. 

  • Noms de classe et certains codes CSS modifiés

  • Fonctionnalité ajoutée pour rechercher si est développé ou réduit

  • Changement si l'utilisation atténuant l'effet ou non

  • Changement de la vitesse d'animation

http://jsfiddle.net/XNnHC/1808/

69
h0mayun

Jetez un coup d’œil à cet exemple de travail sur Fiddle, qui utilise jQuery UI . C’est une solution que j’avais utilisée à l’origine de gauche à droite, mais que j’ai modifiée pour fonctionner de droite à gauche.

Il permet à l'utilisateur de cliquer rapidement sur les liens sans interrompre l'animation parmi les panneaux disponibles.

Le code JavaScript est simple:

$(document).ready(function(){
    // Mostra e nascondi view-news
    var active = "europa-view";
    $('a.view-list-item').click(function () {
        var divname= this.name;
        $("#"+active ).hide("slide", { direction: "right" }, 1200);
        $("#"+divname).delay(400).show("slide", { direction: "right" }, 1200);
        active = divname;
    });
});

Obtenez HTML et CSS sur le lien Fiddle.

Ajout d'un fond blanc et d'un remplissage à gauche pour une meilleure présentation des effets.

22
Erwin Julius

Utilisez ceci

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
    $(document).ready(function(){
        $("#flip").click(function () {
            $("#left_panel").toggle("slide", { direction: "left" }, 1000);
        });
    });
</script>
14
Shwet
$(function() {
  $('.button').click(function() {
    $(this).toggleClass('active');
    $('.yourclass').toggle("slide", {direction: "right"}, 1000);
  });
});
9
Hil

Je l'ai fait de cette façon:

var btn_width = btn.width();
btn.width(0);
btn.show().animate({width: btn_width}, {duration: 500});

Notez que ce nœud "btn" doit être masqué avant l'animation, et vous devrez peut-être également définir "position: absolute".

7
WallTearer

Vous pouvez définir d’abord la largeur de l’élément sur 0, flottant à droite, puis sur l’événement que vous êtes sur le point de l’afficher.

$('#the_element_to_slide_from_right_left').animate({ width:'your desired width' }, 600);

Aussi simple que cela.

4
Teody C. Seguin

Une autre bibliothèque à mentionner est animate.css . Cela fonctionne très bien avec jQuery, et vous pouvez faire beaucoup d'animations intéressantes en basculant simplement les classes CSS.

Comme..

$ ("# slide"). toggle (). toggleClass ('animated bounceInLeft');

4
Soichi Hayashi

La plate-forme d'animation GreenSock (GSAP) avec TweenLiteTweenMax fournit des transitions beaucoup plus douces avec une personnalisation bien plus grande que les transitions jQuery ou CSS3. Pour animer des propriétés CSS avec TweenLite/TweenMax, vous aurez également besoin de leur plugin appelé "CSSPlugin". TweenMax inclut cela automatiquement.

_/Tout d'abord, chargez la bibliothèque TweenMax:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

Ou la version légère, TweenLite:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script>

Ensuite, appelez votre animation:

 var myObj= document.getElementById("myDiv");

// Syntax: (target, speed, {distance, ease})
 TweenLite.to(myObj, .7, { x: 500, ease: Power3.easeOut});

Vous pouvez aussi l'appeler avec un sélecteur d'identifiant:

 TweenLite.to("#myID", .7, { x: 500, ease: Power3.easeOut});

Si jQuery est chargé, vous pouvez utiliser des sélecteurs larges plus avancés, comme tous les éléments contenant une classe spécifique:

 // This will parse the selectors using jQuery's engine.
TweenLite.to(".myClass", .7, { x: 500, ease: Power3.easeOut});

Pour plus de détails, voir: Documentation TweenLite

Selon leur site Web: "TweenLite est un outil d’animation extrêmement rapide, léger et flexible qui sert de base à la plate-forme d’animation GreenSock (GSAP)."

4
TetraDev

Un exemple d'animation de droite à gauche sans interface utilisateur jQuery, uniquement avec jQuery (toute version, voir https://api.jquery.com/animate/ ).

$(document).ready(function() {
  var contentLastMarginLeft = 0;
  $(".wrap").click(function() {
    var box = $(".content");
    var newValue = contentLastMarginLeft;
    contentLastMarginLeft = box.css("margin-left");
    box.animate({
      "margin-left": newValue
    }, 500);
  });
});
.wrap {
  background-color: #999;
  width: 200px;
  overflow: hidden;
}
.content {
  width: 100%;
  margin-left: 100%;
  background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  click here
  <div class="content">
    I would like to have a div go from collapsed to expanded (and vice versa), but do so from right to left. Most everything I see out there is always left to right.
  </div>
</div>

4
fremail

Vérifiez l'exemple ici.

$("#slider").animate({width:'toggle'});

https://jsfiddle.net/q1pdgn96/2/

3
rafaelferreir4

Un exemple réalisé par moi en utilisant le défilement (HTML, CSS et JS uniquement, avec la bibliothèque jQuery). Lorsque vous faites défiler l'écran vers le bas, un bouton glisse vers la gauche. 

Aussi, je vous suggère que si le seul que vous voulez est cet effet, n'utilisez pas jQuery UI car il est trop lourd (si vous voulez simplement l'utiliser pour cela).

$(window).scroll(function(){
  if ($(this).scrollTop() > 100) {
          event.preventDefault();
          $(".scrollToTop").css({'transform': 'translate(0px, 0px)'});
      } else {
          $(".scrollToTop").css({'transform': 'translate(40px, 0px)'});
      }
  });

Vérifiez cet exemple

1
Jordi Vicens

ou vous pouvez utiliser

$('#myDiv').toggle("slide:right");
0
6563cc10d2

Si votre div est absolument positionnée et que vous connaissez la largeur, vous pouvez simplement utiliser:

#myDiv{
position:absolute;
left: 0;
width: 200px;
}

$('#myDiv').animate({left:'-200'},1000);

Ce qui le fera glisser hors de l'écran.

Sinon, vous pouvez envelopper un conteneur div

#myContainer{
position:relative;
width: 200px;
overflow: hidden;
}

#myDiv{
position:absolute;
top: 0;
left: 0;
width: 200px;
}

<div id="myContainer">

<div id="myDiv">Wheee!</div>

</div>

$('#myDiv').animate({left:'-200'},1000);
0
freeworlder