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.
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:
$("#slide").animate({width:'toggle'},350);
Riferimento: https://api.jquery.com/animate/
paddingLeft: 'toggle', paddingRight: 'toggle'
quando l'elemento ha un'imbottitura interna.
CSS
per apparire come una vera diapositiva a sinistra
overflow: hidden
.
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
Usa questo:
$('#pollSlider-button').animate({"margin-right": '+=200'});
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
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.
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>
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.
width: 'toggle'
? btn.show().animate({width: 'toggle'}, {duration: 500});
è tutto ciò di cui hai bisogno, credo.
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');
GreenSock Animation Platform (GSAP) conTweenLite
/TweenMax
fornisce 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)."
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.
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>
oppure puoi usare
$('#myDiv').toggle("slide:right");
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
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);