Scorri da destra a sinistra?


390

Come posso fare in modo che un div passi da compresso a espanso (e viceversa), ma da destra a sinistra?

Quasi tutto ciò che vedo là fuori è sempre da sinistra a destra.




Risposte:


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

Riferimento: https://api.jquery.com/animate/


Puoi anche aggiungere paddingLeft: 'toggle', paddingRight: 'toggle'quando l'elemento ha un'imbottitura interna.
piotr_cz,

17
Funziona bene, solo scivola da sinistra a destra quando lo provo. È possibile farlo animare al contrario?
1616

2
L'unico problema è che se c'è del contenuto all'interno, lo "schiaccia" in orizzontale, facendo muovere i controlli / ridimensionare / avvolgere ecc. C'è una buona soluzione per questo?
Neil Barnwell,

1
Il tuo codice ha bisogno di più CSSper apparire come una vera diapositiva a sinistra
AmerllicA

1
@NeilBarnwell se puoi, metti il ​​contenuto in un involucro di larghezza fissa e disponi il contenitore overflow: hidden.
Ben Philipp,

239

Ciò può essere ottenuto in modo nativo utilizzando i metodi hide / show di jQueryUI. Per esempio.

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

Riferimento: http://docs.jquery.com/UI/Effects/Slide


141
@ekerner - questo richiede JQueryUI, che è una libreria enorme. Se tutto ciò che vuoi è una semplice transizione di diapositive, questa probabilmente non è la risposta;)
Jesse

9
Questo è il modo migliore se hai installato jQueryUI.
potenziato a vapore il

5
Per chiarire: il file minimo è almeno 235kb !! Questo è buono ma si aggiungerà considerevolmente alla tua pagina come sottolinea
@Jesse

1
Utilizzando il builder personalizzato e rimuovendo tutto tranne l'animazione delle diapositive, è possibile ottenere il JS minimizzato inferiore a 20 KB.
Skylar Ittner,

Vorrei che i documenti dell'interfaccia utente di JQuery avessero esempi come questo. Grazie
andreszs,

76

Usa questo:

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

Dimostrazione dal vivo

Versione migliorata

È stato aggiunto un po 'di codice alla demo, per evitare il doppio margine al doppio clic: http://jsfiddle.net/XNnHC/942/

Usalo con facilità;)

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

  • Codici JavaScript extra rimossi.

  • I nomi delle classi e alcuni codici CSS sono stati modificati

  • Aggiunta funzione per scoprire se viene espanso o compresso

  • Modificato se utilizzare l'effetto di andamento o meno

  • Velocità di animazione modificata

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


2
Calcola i valori in "px", quindi non fattibile per "%"
Faisal Ashfaq,

si sta spostando a sinistra ad ogni clic.
Elyor,

Puoi controllare la larghezza esterna e usarla per aggiungere il margine giusto
Tofandel,

22

Dai un'occhiata a questo esempio funzionante su Fiddle, che utilizza l' interfaccia utente di jQuery . È una soluzione che ho usato originariamente da sinistra a destra, ma l'ho cambiata per funzionare da destra a sinistra.

Consente all'utente di fare clic sui collegamenti rapidamente senza interrompere l'animazione tra i pannelli disponibili.

Il codice JavaScript è semplice:

$(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;
    });
});

Ottieni HTML e CSS al link Fiddle.

Aggiunto sfondo bianco e imbottitura a sinistra solo per una migliore presentazione dell'effetto.


8
richiede l'interfaccia utente di jQuery
Jeroen K,

Sì. È indicato nel collegamento di esempio fornito [ jsfiddle.net/erwinjulius/az4JL/]
Erwin Julius

19

Usa questo

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

7
Sì, hai bisogno dell'interfaccia utente di jQuery per le opzioni di allentamento estese
zanderwar,

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

11
Sono tutto per commenti, ma questo codice è abbastanza autoesplicativo.
Jon

7

L'ho fatto in questo modo:

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

Si noti che quel nodo "btn" dovrebbe essere nascosto prima dell'animazione e potrebbe anche essere necessario impostare "position: absolute" su di esso.


Perché non usare width: 'toggle'? btn.show().animate({width: 'toggle'}, {duration: 500});è tutto ciò di cui hai bisogno, credo.
Aart den Braber,

6

Un'altra libreria degna di nota è animate.css . Funziona benissimo con jQuery e puoi fare molte animazioni interessanti semplicemente attivando le classi CSS.

Piace..

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


5

GreenSock Animation Platform (GSAP) conTweenLite/TweenMaxfornisce transizioni molto più fluide con una personalizzazione molto maggiore rispetto alle transizioni jQuery o CSS3. Per animare le proprietà CSS con TweenLite / TweenMax, avrai anche bisogno del loro plugin chiamato "CSSPlugin". TweenMax lo include automaticamente.

Innanzitutto, carica la libreria TweenMax:

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

O la versione leggera, 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>

Quindi chiama l'animazione:

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

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

Puoi anche chiamarlo con un selettore ID:

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

Se hai caricato jQuery, puoi utilizzare selettori generali più avanzati, come tutti gli elementi contenenti una classe specifica:

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

Per i dettagli completi, vedere: Documentazione TweenLite

Secondo il loro sito Web: "TweenLite è uno strumento di animazione estremamente veloce, leggero e flessibile che funge da base per la piattaforma di animazione GreenSock (GSAP)."


4

Puoi definire prima la larghezza dell'elemento come 0, fluttuando a destra, quindi sull'evento che stai per mostrarlo .. sarebbe come

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

Semplice come quella.


4

Un esempio di animazione da destra a sinistra senza l'interfaccia utente di jQuery , solo con jQuery (qualsiasi versione, consultare 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>



3

oppure puoi usare

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

4
Quando si risponde a una domanda di dieci anni con altre quattordici risposte esistenti, sarebbe utile spiegare quale nuovo approccio porta la risposta, e se sarebbe stato valido quando è stata posta la domanda, o se sta usando tecniche che sono diventate disponibili durante quei dieci anni .
Jason Aller,

1

Un esempio fatto da me usando lo scroll (solo HTML, CSS e JS, solo con la libreria jquery). Quando scorre verso il basso, un pulsante farà scorrere verso sinistra.

Inoltre, ti suggerisco se l'unico che desideri è questo effetto, non usare l'interfaccia utente di jQuery perché è troppo pesante (se vuoi semplicemente usarlo per quello).

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

Guarda questo esempio


1
Sì, le transizioni CSS sono oggi il modo migliore per raggiungere questo obiettivo.
Tom Tom il

1

Se il tuo divè assolutamente posizionato e conosci la larghezza, puoi semplicemente usare:

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

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

Che lo farà scorrere fuori dallo schermo.

In alternativa, potresti avvolgerlo in un contenitore 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);
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.