Faites glisser de droite à gauche?

391

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.

Ryan Montgomery
la source

Réponses:

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

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

JQGeek
la source
Vous pouvez également ajouter paddingLeft: 'toggle', paddingRight: 'toggle'lorsque l'élément a un rembourrage interne.
piotr_cz
17
Fonctionne bien, seulement il glisse de gauche à droite lorsque je l'essaye. Est-il possible de l'animer dans l'autre sens?
twan
2
Le seul problème est que s'il y a du contenu à l'intérieur, il "l'écrase" horizontalement, ce qui fait bouger / redimensionner / enrouler les commandes, etc.
Neil Barnwell
1
Votre code a besoin de plus CSSpour ressembler à une vraie diapositive à gauche
AmerllicA
1
@NeilBarnwell si vous le pouvez, mettez le contenu dans un emballage de largeur fixe et ayez le contenant overflow: hidden.
Ben Philipp
239

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

EnGassa
la source
141
@ekerner - cela nécessite JQueryUI, qui est une bibliothèque massive. Si tout ce que vous voulez, c'est une simple transition de diapositive, ce n'est probablement pas la réponse;)
Jesse
9
C'est le meilleur moyen si jQueryUI est installé.
propulsé par vapeur
5
Pour clarifier - le fichier min est d'au moins 235kb !! C'est bien, mais cela ajoutera considérablement à votre page, comme le souligne
@Jesse
1
En utilisant le générateur personnalisé et en supprimant tout sauf l'animation de diapositive, il est possible d'obtenir le JS minifié sous 20 Ko.
Skylar Ittner
Je souhaite que les documents de l'interface utilisateur JQuery contiennent des exemples comme celui-ci. Merci
andreszs
77

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/

h0mayun
la source
2
Calcule les valeurs en 'px', donc pas faisable pour '%'
Faisal Ashfaq
il se déplace vers la gauche à chaque clic.
Elyor
Vous pouvez vérifier la largeur extérieure et l'utiliser pour ajouter la marge de droite
Tofandel
22

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.

Erwin Julius
la source
8
nécessite jQuery UI
Jeroen K
Oui. Il est indiqué sur l'exemple de lien fourni [ jsfiddle.net/erwinjulius/az4JL/]
Erwin Julius
19

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>
Shwet
la source
7
Oui, vous avez besoin de l'interface utilisateur jQuery pour les options d'assouplissement étendues
zanderwar
10
$(function() {
  $('.button').click(function() {
    $(this).toggleClass('active');
    $('.yourclass').toggle("slide", {direction: "right"}, 1000);
  });
});
Hil
la source
11
Je suis tout pour les commentaires mais ce code est assez explicite.
Jon
7

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

Abstrait
la source
Pourquoi ne pas utiliser width: 'toggle'? btn.show().animate({width: 'toggle'}, {duration: 500});c'est tout ce dont vous auriez besoin, je crois.
Aart den Braber
6

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');

Soichi Hayashi
la source
5

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

TetraDev
la source
4

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.

Teody C. Seguin
la source
4

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>

fremail
la source
3

ou vous pouvez utiliser

$('#myDiv').toggle("slide:right");
6563cc10d2
la source
4
Lorsque vous répondez à une question de dix ans avec quatorze autres réponses existantes, cela aiderait à expliquer quelle nouvelle approche votre réponse apporte, et si elle aurait été valide lorsque la question a été posée, ou si elle utilise des techniques devenues disponibles au cours de ces dix années .
Jason Aller
1

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

Jordi Vicens
la source
1
Oui, les transitions CSS sont parmi les meilleures façons d'y parvenir de nos jours.
Tom Tom
1

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);
freeworlder
la source