Foros del Web » Programando para Internet » Javascript »

Efecto puerta garaje

Estas en el tema de Efecto puerta garaje en el foro de Javascript en Foros del Web. Buenas estoy probando un efecto bastante chulo que simula una puerta de garaje, pero tengo un problema, sin tocar el JS ni nada segun me ...
  #1 (permalink)  
Antiguo 28/04/2009, 01:09
 
Fecha de Ingreso: octubre-2008
Mensajes: 122
Antigüedad: 15 años, 7 meses
Puntos: 0
Información Efecto puerta garaje

Buenas estoy probando un efecto bastante chulo que simula una puerta de garaje, pero tengo un problema, sin tocar el JS ni nada segun me bajo el fichero ya me esta funcionando distinto a la demo de la web y no consigo saber porque...a ver si alguien me puede echar un cable.Mil gracias

mi prueba:

http://www.lanxo.es/prueba

La original

http://css-tricks.com/examples/GarageDoorMenu/

PD:no tira en IE6 pero no me importa que tenemos que acabar con el.
  #2 (permalink)  
Antiguo 28/04/2009, 06:09
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Respuesta: Efecto puerta garaje

No veo la diferencia. Mejor describirla.
  #3 (permalink)  
Antiguo 28/04/2009, 07:55
 
Fecha de Ingreso: octubre-2008
Mensajes: 122
Antigüedad: 15 años, 7 meses
Puntos: 0
Respuesta: Efecto puerta garaje

Pues en mi version la ventanilla sube siempre aunque quites el raton de encima antes, la original si quitas el raton la pestaña no sube hasta arriba y se baja fijate en los movimoentos de ambas. un saludo y gracias por tu atencion
  #4 (permalink)  
Antiguo 28/04/2009, 08:10
Avatar de TonyChile  
Fecha de Ingreso: marzo-2009
Ubicación: Maipú, Santiago
Mensajes: 422
Antigüedad: 15 años, 1 mes
Puntos: 7
Respuesta: Efecto puerta garaje

Ya veo la diferencia es muy leve si en el original en el momento de sacar el mouse de la imagen no sige subiendo y baja de inmediato en cambio en el tuyo continua subiendo = voy a tratar de ver los codigos fuentes y si veo la diferencia en el codigo te aviso aunque

Cita:
pablo1985
pero tengo un problema, sin tocar el JS ni nada segun me bajo el fichero ya me esta funcionando distinto a la demo de la web y no consigo saber porque...
si lo copiaste = es raro que ocurra seguro no cambiaste nada y de donde lo bajaste o sacaste el codigo fuente de la pagina solamente?
__________________
Chilenos 100% Chilenos de Corazón
"Nuestra mayor gloria no está en no caer jamás, sino en levantarnos cada vez que caigamos"
  #5 (permalink)  
Antiguo 28/04/2009, 08:14
Avatar de TonyChile  
Fecha de Ingreso: marzo-2009
Ubicación: Maipú, Santiago
Mensajes: 422
Antigüedad: 15 años, 1 mes
Puntos: 7
Respuesta: Efecto puerta garaje

Creo que ya se lo que es pero lo debes probar te falto poner stop()
Código javascript:
Ver original
  1. <script type="text/javascript">
  2.         $(document).ready(function() {
  3.  
  4.             //Set css in Firefox (Required to use the backgroundPosition js)
  5.             $('#shutter1').css({backgroundPosition: '0px 0px'});
  6.             $('#shutter2').css({backgroundPosition: '0px 0px'});
  7.             $('#shutter3').css({backgroundPosition: '0px 0px'});
  8.             $('#shutter4').css({backgroundPosition: '0px 0px'});
  9.  
  10.             //Animate the shutter  
  11.             $(".link").hover(function(){
  12.                   $(this).parent().stop().animate({backgroundPosition: '(0px -100px)'}, 500 );
  13.                 }, function() {
  14.                   $(this).parent().stop().animate({backgroundPosition: '(0px 0px)'}, 500 );
  15.             });
  16.          });
  17.     </script>

tu lo tienes asi:
Código javascript:
Ver original
  1. <script type="text/javascript">
  2.         $(document).ready(function() {
  3.  
  4.             //Set css in Firefox (Required to use the backgroundPosition js)
  5.             $('#shutter1').css({backgroundPosition: '0px 0px'});
  6.             $('#shutter2').css({backgroundPosition: '0px 0px'});
  7.             $('#shutter3').css({backgroundPosition: '0px 0px'});
  8.             $('#shutter4').css({backgroundPosition: '0px 0px'});
  9.  
  10.             //Animate the shutter  
  11.             $(".link").hover(function(){
  12.                   $(this).parent().animate({backgroundPosition: '(0px -100px)'}, 500 );
  13.                 }, function() {
  14.                   $(this).parent().animate({backgroundPosition: '(0px 0px)'}, 500 );
  15.             });
  16.          });
  17.     </script>

Vee si era eso y avisas
__________________
Chilenos 100% Chilenos de Corazón
"Nuestra mayor gloria no está en no caer jamás, sino en levantarnos cada vez que caigamos"
  #6 (permalink)  
Antiguo 28/04/2009, 09:13
 
Fecha de Ingreso: octubre-2008
Mensajes: 122
Antigüedad: 15 años, 7 meses
Puntos: 0
Respuesta: Efecto puerta garaje

lo gracioso es que si te lo bajas de la web y lo ejecutas te pasa lo mismo que a mi...en la demo que tienen colgada deben de haber añadido el stop que me comentas...luego pruebo a ver que tal y te cuento! mil gracias!!!
  #7 (permalink)  
Antiguo 28/04/2009, 09:18
Avatar de TonyChile  
Fecha de Ingreso: marzo-2009
Ubicación: Maipú, Santiago
Mensajes: 422
Antigüedad: 15 años, 1 mes
Puntos: 7
Respuesta: Efecto puerta garaje

De nada yo el codigo lo saque del codigo fuente de la pagina y lo primero que note fue esa diferencia con el tuyo y no hay nada mas diferente.
Espero que aya sido eso y te funcione
__________________
Chilenos 100% Chilenos de Corazón
"Nuestra mayor gloria no está en no caer jamás, sino en levantarnos cada vez que caigamos"
  #8 (permalink)  
Antiguo 11/05/2009, 09:02
 
Fecha de Ingreso: octubre-2008
Mensajes: 122
Antigüedad: 15 años, 7 meses
Puntos: 0
Respuesta: Efecto puerta garaje

Ya esta solucionado mil gracias de nuevo tony!! eres un fenomeno ya sabeis si os gusta el efecto es bastante facil de implementar.un saludo
  #9 (permalink)  
Antiguo 11/05/2009, 09:12
Avatar de TonyChile  
Fecha de Ingreso: marzo-2009
Ubicación: Maipú, Santiago
Mensajes: 422
Antigüedad: 15 años, 1 mes
Puntos: 7
Respuesta: Efecto puerta garaje

De nada pablo1985 me alegro que te funcionara era solo por un detalle lo que no permitia que te funcionara y si es un muy buen efecto para poner en algunas paginas que estes muy bien
__________________
Chilenos 100% Chilenos de Corazón
"Nuestra mayor gloria no está en no caer jamás, sino en levantarnos cada vez que caigamos"
  #10 (permalink)  
Antiguo 13/05/2009, 08:52
 
Fecha de Ingreso: octubre-2008
Mensajes: 122
Antigüedad: 15 años, 7 meses
Puntos: 0
Respuesta: Efecto puerta garaje

Cita:
Iniciado por TonyChile Ver Mensaje
De nada pablo1985 me alegro que te funcionara era solo por un detalle lo que no permitia que te funcionara y si es un muy buen efecto para poner en algunas paginas que estes muy bien
Lo único malo es que parece no llevarse muy bien para ie6...pero bueno yo ya no tengo eso en cuenta..
un saludo!!
  #11 (permalink)  
Antiguo 13/05/2009, 15:17
Avatar de TonyChile  
Fecha de Ingreso: marzo-2009
Ubicación: Maipú, Santiago
Mensajes: 422
Antigüedad: 15 años, 1 mes
Puntos: 7
Respuesta: Efecto puerta garaje

Cita:
Iniciado por pablo1985 Ver Mensaje
Lo único malo es que parece no llevarse muy bien para ie6...pero bueno yo ya no tengo eso en cuenta..
un saludo!!

La verdad no se cuando lo probe fue en el IE7
y a que te refieres q es lo que pasa?
__________________
Chilenos 100% Chilenos de Corazón
"Nuestra mayor gloria no está en no caer jamás, sino en levantarnos cada vez que caigamos"
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 14:48.