Faites glisser de droite à gauche?

Comment puis-je faire passer un div de l'effondré à l'expansé (et vice versa), mais le faire de droite à gauche?

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

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

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

Ceci peut être réalisé nativement en utilisant les méthodes jQueryUI hide / show. Par exemple.

    // 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

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 lors d'un double clic: http://jsfiddle.net/XNnHC/942/

Utilisez-le avec assouplissement;)

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

• Les codes JavaScript supplémentaires ont été supprimés.

• Les noms de classe et certains codes CSS ont changé

• Fonctionnalité ajoutée pour trouver si est développée ou réduite

• Modification de l'utilisation ou non de l'effet d'assouplissement

• Vitesse d'animation modifiée

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

Jetez un œil à cet exemple de travail sur Fiddle, qui utilise l' interface utilisateur jQuery . C'est une solution que j'ai utilisée à l'origine de gauche à droite, mais je l'ai modifiée pour qu'elle fonctionne 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 rembourrage à gauche pour une meilleure présentation des effets.

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>

$(function() {
  $('.button').click(function() {
    $(this).toggleClass('active');
    $('.yourclass').toggle("slide", {direction: "right"}, 1000);
  });
});

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 lui définir "position: absolue".

Une autre bibliothèque qui mérite d'être mentionnée est animate.css . Cela fonctionne très bien avec jQuery, et vous pouvez faire beaucoup d'animations intéressantes simplement en basculant les classes CSS.

Comme..

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

GreenSock Animation Platform (GSAP) avecTweenLite/TweenMaxfournit des transitions beaucoup plus fluides avec une personnalisation beaucoup plus grande que les transitions jQuery ou CSS3. Afin d'animer les propriétés CSS avec TweenLite / TweenMax, vous aurez également besoin de leur plugin appelé "CSSPlugin". TweenMax l'inclut 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 également l'appeler avec un sélecteur d'ID:

 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)."

Vous pouvez d'abord définir la largeur de l'élément comme 0, flottant à droite, puis sur l'événement que vous êtes sur le point de le montrer .. ce serait comme

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

Aussi simple que cela.

Un exemple d'animation de droite à gauche sans interface utilisateur jQuery , uniquement avec jQuery (n'importe quelle 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>

Vérifiez l'exemple ici.

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

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

ou vous pouvez utiliser

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

Un exemple fait par moi en utilisant le scroll (juste HTML, CSS et JS, juste avec la bibliothèque jquery). Lorsque vous faites défiler vers le bas, un bouton glisse vers la gauche.

De plus, 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 juste l'utiliser pour ça).

$(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

Si votre divest parfaitement positionné 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.

Alternativement, vous pouvez l'envelopper dans 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);