Desliza de derecha a izquierda?

¿Cómo puedo hacer que un div pase de colapsado a expandido (y viceversa), pero hágalo de derecha a izquierda?

La mayoría de todo lo que veo siempre está de izquierda a derecha.

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

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

Esto se puede lograr de forma nativa utilizando los métodos jQueryUI hide / show. 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

Utilizar esta:

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

Demo en vivo

Versión mejorada

Se agregó un código a la demostración para evitar el doble margen al hacer doble clic: http://jsfiddle.net/XNnHC/942/

Úselo con facilidad;)

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

  • Códigos extra de JavaScript eliminados.

  • Nombres de clase y algunos códigos CSS cambiados

  • Se agregó una función para encontrar si está expandido o colapsado

  • Cambiado si el efecto de relajación de uso o no

  • Cambió la velocidad de animación

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

Eche un vistazo a este ejemplo de trabajo en Fiddle, que usa 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; }); }); 

Obtenga HTML y CSS en el enlace de Fiddle.

Se agregó fondo blanco y relleno izquierdo solo para una mejor presentación de efectos.

Demasiado simple:

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

Lo hice de esta manera:

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

Tenga en cuenta que ese nodo “btn” debe estar oculto antes de la animación, y es posible que también deba establecer “position: absolute” en él.

Puede definir primero el ancho del elemento como 0, flotante a la derecha, y luego en el caso de 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.

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; } 
  
click here
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.

Otra biblioteca que vale la pena mencionar es animate.css . Funciona muy bien con jQuery, y puedes hacer muchas animaciones interesantes simplemente alternar las clases de CSS.

Me gusta..

$ (“# slide”). toggle (). toggleClass (‘bounceInLeft animado’);

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 de CSS con TweenLite / TweenMax, también necesitará su complemento llamado “CSSPlugin”. TweenMax incluye esto automáticamente.

Primero, cargue la biblioteca TweenMax:

  

O la versión ligera, TweenLite:

    

Luego, 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 puede llamarlo con un selector de ID:

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

Si tiene jQuery cargado, puede usar selectores más amplios, 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 obtener más información, consulte: Documentación de 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)”.

Mira el ejemplo aquí.

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

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

Un ejemplo hecho por mí usando el desplazamiento (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 el único que deseas es este efecto, no uses la interfaz de usuario de jQuery 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

Si tu div está completamente posicionado y conoces el ancho, puedes usar:

 #myDiv{ position:absolute; left: 0; width: 200px; } $('#myDiv').animate({left:'-200'},1000); 

Que lo deslizará fuera de la 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; } 
Wheee!
$('#myDiv').animate({left:'-200'},1000);