top - jquery ui dialog
Deslice de derecha a izquierda? (14)
¿Cómo puedo hacer que un div pase de colapsado a expandido (y viceversa), pero hacerlo de derecha a izquierda?
Casi todo lo que veo por ahí siempre es de izquierda a derecha.
Echa un vistazo a este ejemplo de trabajo en Fiddle, que utiliza jQuery UI . Es una solución que he usado originalmente de izquierda a derecha, pero la he cambiado para que funcione de derecha a izquierda.
Permite al usuario hacer clic en los enlaces rápidamente sin romper la animación entre los paneles disponibles.
El código de JavaScript es 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;
});
});
Obtén HTML y CSS en el enlace Fiddle.
Se agregó fondo blanco y relleno izquierdo para una mejor presentación del efecto.
Esto se puede lograr de forma nativa utilizando los métodos de ocultar / mostrar jQueryUI. P.ej.
// To slide something leftwards into view,
// with a delay of 1000 msec
$("div").click(function () {
$(this).show("slide", { direction: "left" }, 1000);
});
Referencia: http://docs.jquery.com/UI/Effects/Slide
Lo he hecho de esta manera:
var btn_width = btn.width();
btn.width(0);
btn.show().animate({width: btn_width}, {duration: 500});
Tenga en cuenta que el nodo "btn" debe estar oculto antes de la animación, y es posible que también deba establecer "position: absolute".
Otra biblioteca que vale la pena mencionar es animate.css . Funciona muy bien con jQuery, y puedes hacer muchas animaciones interesantes simplemente alternando clases CSS.
Me gusta..
$ ("# slide"). toggle (). toggleClass (''animated bounceInLeft'');
Puede definir primero el ancho del elemento como 0, flotando a la derecha, y luego en el evento que está a punto de mostrarlo ... sería como
$(''#the_element_to_slide_from_right_left'').animate({ width:''your desired width'' }, 600);
Simple como eso.
Si su div es absolutamente posicionado y conoce el ancho, puede usar:
#myDiv{
position:absolute;
left: 0;
width: 200px;
}
$(''#myDiv'').animate({left:''-200''},1000);
Lo que lo deslizará fuera de pantalla.
Alternativamente, podrías envolverlo en un contenedor 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);
Un ejemplo de animación de derecha a izquierda sin jQuery UI , solo con jQuery (cualquier versión, consulte 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>
Un ejemplo hecho por mí usando el scroll (solo HTML, CSS y JS, solo con la biblioteca jquery). Cuando se desplaza hacia abajo un botón se deslizará hacia la izquierda.
Además, te sugiero que si lo único que quieres es este efecto, no uses jQuery UI porque es demasiado pesado (si solo quieres usarlo para eso).
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
event.preventDefault();
$(".scrollToTop").css({''transform'': ''translate(0px, 0px)''});
} else {
$(".scrollToTop").css({''transform'': ''translate(40px, 0px)''});
}
});
Mira este ejemplo
Utilizar esta
<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>
Utilizar esta:
$(''#pollSlider-button'').animate({"margin-right": ''+=200''});
Versión mejorada
Se ha agregado algún código a la demostración, para evitar el doble margen al hacer doble clic: http://jsfiddle.net/XNnHC/942/
Úsalo con suavizado;)
http://jsfiddle.net/XNnHC/1591/
Códigos de JavaScript extra eliminados.
Nombres de clase y algunos códigos CSS cambiados
Característica agregada para encontrar si está expandido o colapsado
Se modificó si se usa el efecto de suavizado o no.
Velocidad de animación cambiada
La plataforma de animación GreenSock (GSAP) con TweenLite / TweenMax proporciona transiciones mucho más suaves con una personalización mucho mayor que las transiciones jQuery o CSS3. Para animar las propiedades CSS con TweenLite / TweenMax, también necesitará su complemento llamado "CSSPlugin". TweenMax incluye esto automáticamente.
Primero, cargue la librería TweenMax:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
O la versión ligera, 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>
Entonces, llama a tu animación:
var myObj= document.getElementById("myDiv");
// Syntax: (target, speed, {distance, ease})
TweenLite.to(myObj, .7, { x: 500, ease: Power3.easeOut});
También puedes llamarlo con un selector de ID:
TweenLite.to("#myID", .7, { x: 500, ease: Power3.easeOut});
Si tiene jQuery cargado, puede usar selectores amplios más avanzados, como todos los elementos que contienen una clase específica:
// This will parse the selectors using jQuery''s engine.
TweenLite.to(".myClass", .7, { x: 500, ease: Power3.easeOut});
Para más detalles, ver: Documentación TweenLite
Según su sitio web: "TweenLite es una herramienta de animación extremadamente rápida, liviana y flexible que sirve como base de la plataforma de animación GreenSock (GSAP)".
$("#slide").animate({width:''toggle''},350);
Referencia: https://api.jquery.com/animate/
$(function() {
$(''.button'').click(function() {
$(this).toggleClass(''active'');
$(''.yourclass'').toggle("slide", {direction: "right"}, 1000);
});
});