Foros del Web » Programando para Internet » Javascript » Frameworks JS »

como hacer slide a la derecha o izquierda

Estas en el tema de como hacer slide a la derecha o izquierda en el foro de Frameworks JS en Foros del Web. hola buenas noches como la pregunta dice como le puedo hacer que se haga un slide a la derecha o izq. en jquery...
  #1 (permalink)  
Antiguo 31/10/2011, 18:27
 
Fecha de Ingreso: agosto-2008
Ubicación: D,F
Mensajes: 412
Antigüedad: 13 años, 10 meses
Puntos: 4
como hacer slide a la derecha o izquierda

hola buenas noches como la pregunta dice como le puedo hacer que se haga un slide a la derecha o izq. en jquery
__________________
Si el amor a una mujer es igual al amor a la programacion
cual de las dos escojerias...mmmm buena pregunta jejeje
  #2 (permalink)  
Antiguo 01/11/2011, 12:59
Avatar de Trublux  
Fecha de Ingreso: octubre-2010
Ubicación: Madrid
Mensajes: 355
Antigüedad: 11 años, 8 meses
Puntos: 48
Respuesta: como hacer slide a la derecha o izquierda

Empieza buscando en la documentación:
http://api.jquery.com/animate/
__________________
eZ Publish Developer Basic Legacy
eZ Publish Developer Basics (4.4)
Alojamientos rurales en España
  #3 (permalink)  
Antiguo 01/11/2011, 13:13
 
Fecha de Ingreso: agosto-2008
Ubicación: D,F
Mensajes: 412
Antigüedad: 13 años, 10 meses
Puntos: 4
Respuesta: como hacer slide a la derecha o izquierda

osea q no es con la propiedad slide
__________________
Si el amor a una mujer es igual al amor a la programacion
cual de las dos escojerias...mmmm buena pregunta jejeje
  #4 (permalink)  
Antiguo 01/11/2011, 13:22
Avatar de Trublux  
Fecha de Ingreso: octubre-2010
Ubicación: Madrid
Mensajes: 355
Antigüedad: 11 años, 8 meses
Puntos: 48
Respuesta: como hacer slide a la derecha o izquierda

Pensaba que decías slide en "generico", no que quisieses usar ese efecto, bueno los efectos se llaman slideUp y slideDown; y slideToggle que las alterna.
De todas formas, si tuvieses un problema más concreto sería más fácil ayudar.
Deberías especificar si quieres mover un div, una imagen, o qué exactamente (si puedes poner el html en concreto, mejor).
__________________
eZ Publish Developer Basic Legacy
eZ Publish Developer Basics (4.4)
Alojamientos rurales en España
  #5 (permalink)  
Antiguo 01/11/2011, 13:28
 
Fecha de Ingreso: agosto-2008
Ubicación: D,F
Mensajes: 412
Antigüedad: 13 años, 10 meses
Puntos: 4
Respuesta: como hacer slide a la derecha o izquierda

es que tengo un diseño de un boton que a la hora que le dan click un div hace un slide hacia abajo para mostrar el contenido pero tambien quiero hacer que ese boton se alarge haciendo el efecto de un slidedown pero en ves de que sea slideDown quisiera que fuera slideRight
Código HTML:
Ver original
  1. <div id="bot" ><a href="#" id="pen"><span id="text2">Pensión</span></a></div>
  2.         <article id="pencion">
  3.             <article id="cont">
  4.                   <h2>Pensión</h2>
  5.                               <article id="text">
  6.                                      
  7.                                   contenido.....
  8.  
  9.  
  10.  
  11.                  </article>
  12.             </article>
  13.         </article>
__________________
Si el amor a una mujer es igual al amor a la programacion
cual de las dos escojerias...mmmm buena pregunta jejeje
  #6 (permalink)  
Antiguo 01/11/2011, 14:05
Avatar de Trublux  
Fecha de Ingreso: octubre-2010
Ubicación: Madrid
Mensajes: 355
Antigüedad: 11 años, 8 meses
Puntos: 48
Respuesta: como hacer slide a la derecha o izquierda

No es exactamente lo mismo pero hace poco salió un tema que puede que te sirva de ejemplo:
http://www.forosdelweb.com/f13/mover...jquery-953308/

Modificándolo un poco para que se adapte a tu html.

Código CSS:
Ver original
  1. #text{display:none; margin-left:-100px}

Código Javascript:
Ver original
  1. $(function(){
  2.     $('#pen').click(function() {
  3.         $('#text').animate( {marginLeft:0,opacity:"show"}, 2000, "linear" );
  4.     });
  5. });

Esto haría que la capa "#text" se mostrase de izquierda a derecha y pasando de transparente a opaco (es mejor que lo pruebes y veas el resultado).
__________________
eZ Publish Developer Basic Legacy
eZ Publish Developer Basics (4.4)
Alojamientos rurales en España

Última edición por Trublux; 01/11/2011 a las 14:08 Razón: Quitar comentarios que se me olvidó eliminar
  #7 (permalink)  
Antiguo 01/11/2011, 14:58
 
Fecha de Ingreso: agosto-2008
Ubicación: D,F
Mensajes: 412
Antigüedad: 13 años, 10 meses
Puntos: 4
Respuesta: como hacer slide a la derecha o izquierda

mmm me manda unos errores lo que pasa es que estoy ocupando jquery y lo estoy dejando asi
Código JQuery:
Ver original
  1. $(document).ready(
  2.     function()
  3.     {
  4.         $("#pen").click(text)
  5.     }
  6. );
  7.  
  8. function text()
  9. {
  10.     $("#text").animate({marginLeft:0,opacity:"show"},2000,"linear")};
  11. }

en la funcion text es donde me manda el error
__________________
Si el amor a una mujer es igual al amor a la programacion
cual de las dos escojerias...mmmm buena pregunta jejeje
  #8 (permalink)  
Antiguo 01/11/2011, 15:36
Avatar de Trublux  
Fecha de Ingreso: octubre-2010
Ubicación: Madrid
Mensajes: 355
Antigüedad: 11 años, 8 meses
Puntos: 48
Respuesta: como hacer slide a la derecha o izquierda

Prueba así:
Código Javascript:
Ver original
  1. $(function(){
  2.     $("#pen").click( text );
  3. });
  4. function text(){
  5.     $("#text").animate({marginLeft:0,opacity:"show"},2000,"linear");
  6. }

P.D.: $(function(){/******/ }) es lo mismo que $(document).ready( /******/ );
__________________
eZ Publish Developer Basic Legacy
eZ Publish Developer Basics (4.4)
Alojamientos rurales en España
  #9 (permalink)  
Antiguo 01/11/2011, 15:37
 
Fecha de Ingreso: agosto-2008
Ubicación: D,F
Mensajes: 412
Antigüedad: 13 años, 10 meses
Puntos: 4
Respuesta: como hacer slide a la derecha o izquierda

Trublux ya pude hacer que se alarge como le puedo hacer para que si le vuelven a dar click se regrese seria como el slidetoogle te pongo el codigo de como lo deje para que se alargara:
Código jquey:
Ver original
  1. function text()
  2. {
  3.    
  4.    
  5.     $("#bot").animate({width:"100%"},1000)
  6.    
  7. }
__________________
Si el amor a una mujer es igual al amor a la programacion
cual de las dos escojerias...mmmm buena pregunta jejeje
  #10 (permalink)  
Antiguo 01/11/2011, 15:51
Avatar de Trublux  
Fecha de Ingreso: octubre-2010
Ubicación: Madrid
Mensajes: 355
Antigüedad: 11 años, 8 meses
Puntos: 48
Respuesta: como hacer slide a la derecha o izquierda

Entonces sería algo así:
Código CSS:
Ver original
  1. #text{display:none; margin-left:-100px}

Código Javascript:
Ver original
  1. var mostrar = function(){
  2.     $("#text").animate({marginLeft:0,opacity:"show"},1000,"linear");
  3. }
  4. var ocultar = function(){
  5.     $("#text").animate({marginLeft:"-100px",opacity:"hide"},1000,"linear");
  6. }
  7.  
  8. $(function(){
  9.     $( '#text2' ).toggle(
  10.         function(){
  11.             mostrar();
  12.         }, function(){
  13.             ocultar();
  14.         }
  15.     );
  16. });

O podrías poner esto:
Código CSS:
Ver original
  1. #text{width:0px; overflow:hidden}

Código Javascript:
Ver original
  1. var mostrar = function(){
  2.     $("#text").animate({width:"100%"},1000,"linear");
  3. }
  4. var ocultar = function(){
  5.     $("#text").animate({width:"0"},1000,"linear");
  6. }
  7.  
  8. $(function(){
  9.     $( '#text2' ).toggle(
  10.         function(){
  11.             mostrar();
  12.         }, function(){
  13.             ocultar();
  14.         }
  15.     );
  16. });

Le he puesto que tarde menos tiempo (antes estaba en 2 segundos, ahora está en 1 segundo)
__________________
eZ Publish Developer Basic Legacy
eZ Publish Developer Basics (4.4)
Alojamientos rurales en España

Etiquetas: derecha, izquierda, jquery, slide
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:01.