Foros del Web » Programando para Internet » Jquery »

Problema con Animate de jquery

Estas en el tema de Problema con Animate de jquery en el foro de Jquery en Foros del Web. Código: function abc(){ $(".animacion").animate({ 'width': "150px", }); }; function abcd(){ $(".animacion").animate({ 'width': "130px", }); }; <a href="##" onclick="mostrar('manual_texto')" onmouseover="abc()" onmouseout="abcd()" id="animar"><img class="animacion" src="archivos/menu_manual_2.png"" /></a> el ...
  #1 (permalink)  
Antiguo 25/05/2011, 15:55
 
Fecha de Ingreso: marzo-2011
Mensajes: 20
Antigüedad: 13 años
Puntos: 1
Problema con Animate de jquery

Código:
   function abc(){
      
      $(".animacion").animate({
         'width': "150px",
         
      });
   };
   
   function abcd(){

    $(".animacion").animate({
         'width': "130px",
         
      });
   };

<a href="##" onclick="mostrar('manual_texto')" onmouseover="abc()" onmouseout="abcd()" id="animar"><img class="animacion" src="archivos/menu_manual_2.png"" /></a>
el problema es que cuando el cursor entra desde la parte inferior de la imagen la animación se repite (Grande-Chica-Grande),
pero cuando el cursor entra desde un costado si la ejecuta correctamente. alguna Opción o error que tenga?

Gracias por su ayuda!
  #2 (permalink)  
Antiguo 25/05/2011, 20:56
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antigüedad: 18 años, 5 meses
Puntos: 87
Respuesta: Problema con Animate de jquery

El error es que el area de mouseover/mouseout cambia con el efecto que tiene sobre la misma; asi que lo que tiene que hacer es meter la animación en un contenedor con un tamaño estatico, y asignarle el evento a este contenedor.

Y para evitar que el evento se "dispare" en multiples ocaciones lo mejor es usar mouseenter y mouseleave de jQuery.

Quedaria asi:
Código Javascript:
Ver original
  1. $(function(){
  2. $("#animar").mouseenter(function(){
  3.     $("#imagen").stop().animate({'width': "130px"})
  4. }).mouseleave(function(){
  5.     $("#imagen").stop().animate({'width': "150px"})
  6. })
  7. })

Código HTML:
Ver original
  1. <a href="#" id="animar" style="width:150px; height:140px; background-color:#FFF; display:inline-block" ><img id="imagen" src="http://awsimx.fathermag.com/daughter/girl_with_cat_8776698_XS_400x300.jpg" width="150" /></a>

Aquí lo puede ver funcionando: http://jsfiddle.net/PTGUZ/

Por cierto, esto tambien sucede cuando se cambia el tamaño del elemento en estado :hover CSS (aunque en ese caso la solucion es diferente)
  #3 (permalink)  
Antiguo 26/05/2011, 12:10
 
Fecha de Ingreso: marzo-2011
Mensajes: 20
Antigüedad: 13 años
Puntos: 1
Respuesta: Problema con Animate de jquery

Gracias por la ayuda!

Lo haces usado tu?

No me funciona. y uso el código que me proporciona.
  #4 (permalink)  
Antiguo 26/05/2011, 16:57
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antigüedad: 18 años, 5 meses
Puntos: 87
Respuesta: Problema con Animate de jquery

No te funciona en el link que te di? http://jsfiddle.net/PTGUZ/
Hay se ve como funciona con el html/js
  #5 (permalink)  
Antiguo 26/05/2011, 17:50
 
Fecha de Ingreso: marzo-2011
Mensajes: 20
Antigüedad: 13 años
Puntos: 1
Respuesta: Problema con Animate de jquery

Hola Gracias! me funciona a la perfección cuando lo ejecuto local, pero en el momento de subirlo al servidor, ya no me realiza la animación.
  #6 (permalink)  
Antiguo 26/05/2011, 17:55
 
Fecha de Ingreso: marzo-2011
Mensajes: 20
Antigüedad: 13 años
Puntos: 1
Respuesta: Problema con Animate de jquery

Listo! era otro script que me hacia ruido! Gracias por la Ayuda =)

Etiquetas: agrandar, animacion, javascript
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 00:21.