Deslizar de derecha a izquierda?

Respuestas:

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

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

JQGeek
fuente
También puede agregar paddingLeft: 'toggle', paddingRight: 'toggle'cuando el elemento tiene relleno interno.
piotr_cz
17
Funciona bien, solo se desliza de izquierda a derecha cuando lo intento. ¿Es posible hacer que se anime al revés?
2016
2
El único problema es que si hay contenido dentro, lo "aplasta" horizontalmente, haciendo que los controles se muevan / cambien de tamaño / se ajusten, etc. ¿Hay una buena solución para eso?
Neil Barnwell
1
Su código necesita más CSSpara parecer una diapositiva real a la izquierda
AmerllicA
1
@NeilBarnwell si puede, coloque el contenido en una envoltura de ancho fijo y tenga el contenedor overflow: hidden.
Ben Philipp
239

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

EnGassa
fuente
141
@ekerner: esto requiere JQueryUI, que es una biblioteca masiva. Si todo lo que quieres es una simple transición de diapositiva, probablemente esta no sea la respuesta;)
Jesse
99
Esta es la mejor manera si tiene instalado jQueryUI.
impulsado por vapor el
55
Para aclarar, ¡el archivo min es de al menos 235kb! Esto es bueno, pero se agregará considerablemente a su página como @Jesse señala
Ukuser32
1
Usando el generador personalizado y eliminando todo menos la animación de la diapositiva, es posible obtener el JS minimizado por debajo de 20 KB.
Skylar Ittner
Desearía que los documentos de la interfaz de usuario de JQuery tuvieran ejemplos como este. Gracias
andreszs
77

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/

h0mayun
fuente
2
Calcula valores en 'px', por lo que no es factible para '%'
Faisal Ashfaq
se mueve hacia la izquierda con cada clic.
Elyor
Puede verificar el ancho exterior y usarlo para agregar el margen correcto
Tofandel
22

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.

Erwin Julius
fuente
8
requiere jQuery UI
Jeroen K
Si. Se indica en el enlace de ejemplo proporcionado [ jsfiddle.net/erwinjulius/az4JL/]
Erwin Julius
19

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>
Shwet
fuente
77
Sí, necesita jQuery UI para las opciones de relajación ampliadas
zanderwar
10
$(function() {
  $('.button').click(function() {
    $(this).toggleClass('active');
    $('.yourclass').toggle("slide", {direction: "right"}, 1000);
  });
});
Hil
fuente
11
Estoy a favor de comentarios, pero este código se explica por sí mismo.
Jon
7

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

AbstractVoid
fuente
¿Por qué no usar width: 'toggle'? btn.show().animate({width: 'toggle'}, {duration: 500});es todo lo que necesitas, creo.
Aart den Braber
6

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');

Soichi Hayashi
fuente
5

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)".

TetraDev
fuente
4

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.

Teody C. Seguin
fuente
4

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>

fremail
fuente
3

o puedes usar

$('#myDiv').toggle("slide:right");
6563cc10d2
fuente
44
Al responder una pregunta de diez años con otras catorce respuestas existentes, sería útil explicar qué nuevo enfoque aporta su respuesta, y si hubiera sido válida cuando se hizo la pregunta, o si está utilizando técnicas que estuvieron disponibles durante esos diez años. .
Jason Aller
1

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

Jordi Vicens
fuente
1
Sí, las transiciones CSS se encuentran entre la mejor manera de lograr esto hoy en día.
Tom Tom
1

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);
Freeworlder
fuente