2010-03-09 27 views
27

He visto slideUp y slideDown en jQuery. ¿Qué pasa con las funciones/formas de deslizamiento hacia la izquierda y hacia la derecha?jQuery: deslice hacia la izquierda y deslice hacia la derecha

+6

Puede simplemente hacer un 'animado ({ancho: 0})' luego establecer la posición derecha o izquierda para que se vea como deslizamiento hacia la derecha o hacia la izquierda. –

Respuesta

65

Usted puede hacer esto con los efectos adicionales en jQuery UI: See here for details

ejemplo rápido:

$(this).hide("slide", { direction: "left" }, 1000); 
$(this).show("slide", { direction: "left" }, 1000); 
+0

Esto parece depender de ** Effects Core **, ¿no hay forma de lograr esto sin ningún material externo? – Sarfraz

+0

@Sarfraz - No es que yo sepa, entonces usted está reinventando la rueda de todos modos ... una nota que puede ser útil, mantenga la dirección igual para ocultar/mostrar, es la dirección de la que proviene o se dirige ... es un tanto contra-intuitivo que es lo mismo, pero te acostumbras. –

+0

@Sarfraz - Si quieres, puedes probar y sacar las piezas que necesitas, pero mucho esfuerzo, comienza aquí si vas por esa ruta: http://code.google.com/p/jquery-ui/source /browse/branches/dev/effects/ui/effects.slide.js?r=2454 –

21

Si no desea algo hinchada como jQuery UI, trate mis animaciones personalizadas: https://github.com/yckart/jquery-custom-animations

Para usted, blindLeftToggle y blindRightToggle es la opción adecuada.

http://jsfiddle.net/ARTsinn/65QsU/

+2

Gracias por estas impresionantes funciones ... Estaba buscando cosas fáciles como esta para siempre. Y funciona como un encanto. –

+0

cuando quiero hacer eso, la consola me dice 'Uncaught TypeError: Object [Object Object] no tiene el método 'blindLeftToggle'' –

+0

esto no funciona, no pasa nada. –

5

siempre puede utilizar jQuery para agregar una clase, o .addClass.toggleClass. Luego puedes mantener todos tus estilos en tu CSS y fuera de tus scripts.

http://jsfiddle.net/B8L3x/1/

0

Este código funciona bien:. $ (document) ready (function() {var options = {}; $ ("#") c ocultar (); $ ("# d"). Hide(); $ ("# a"). Clic (función() { $ ("# c"). Alternar ("diapositiva", opciones, 500); $ ("# d"). Hide(); }); $ ("# b"). Clic (funct ion() { $ ("# d"). alternar ("diapositiva", opciones, 500); $ ("# c").esconder(); }); }); nav { flotador: izquierda; max-width: 300px; ancho: 300px; margin-top: 100px; } artículo { margin-top: 100px; altura: 100 px; } # c, # d { relleno: 10px; borde: 1px oliva sólido; margin-left: 100px; margin-top: 100px; color de fondo: azul; } botón { borde: 2px azul fijo; color de fondo: blanco; color: negro; relleno: 10px; } hi Registro 1



Registro 2

<article id="c"> 
     <form> 
      <label>User name:</label> 
      <input type="text" name="123" value="something"/> 
      <br> 
      <br> 
      <label>Password:</label> 
      <input type="text" name="456" value="something"/> 
     </form> 
    </article> 
    <article id="d"> 
     <p>Hi</p> 
    </article> 
</body> 

Ref erence: W3schools.com y jqueryui.com

Nota: Este es un código de ejemplo no olvide agregar todas las etiquetas de secuencia de comandos para lograr el correcto funcionamiento del código.

Cuestiones relacionadas