Deslizar de derecha a izquierda?

¿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 se deja 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 este:

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

Demo en vivo

Versión mejorada

Se ha agregado algún código a la demostración, para evitar el doble margen con doble clic: http://jsfiddle.net/XNnHC/942/

Úselo con alivio;)

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

• Se eliminaron los códigos JavaScript adicionales.

• Los nombres de clase y algunos códigos CSS cambiaron

• Característica agregada para encontrar si se expande o se contrae

• Se modificó si se usa el efecto de alivio o no

• Velocidad de animación modificada

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

Eche un vistazo a este ejemplo de trabajo en Fiddle, que usa jQuery UI . Es una solución que usé originalmente de izquierda a derecha, pero la cambié 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 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 Fiddle.

Se agregó fondo blanco y relleno izquierdo solo para una mejor presentación del efecto.

Utilizar este

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

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

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 cambiando las clases CSS.

Me gusta..

$ ("# slide"). toggle (). toggleClass ('animación bounceInLeft');

GreenSock Animation Platform (GSAP) conTweenLite/TweenMaxproporciona 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 biblioteca 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>

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 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, ligera y flexible que sirve como base de la plataforma de animación GreenSock (GSAP)".

Puede definir primero el ancho del elemento como 0, flotando 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;
}

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

Mira el ejemplo aquí.

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

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

o puedes usar

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

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, le sugiero que si lo único que desea es este efecto, no use jQuery UI porque es demasiado pesado (si solo quiere 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 su divposición es absoluta y conoce el ancho, puede usar:

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

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

Lo que lo deslizará fuera de la pantalla.

Alternativamente, podría 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);