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

Se colapsa la animación

Estas en el tema de Se colapsa la animación en el foro de Frameworks JS en Foros del Web. Os pongo un código supersencillo de prueba. Simplemente cuaando el ratón se pone sobre(mouseover) la capa "uno" muestra la capa "dos" y cuando sale(mouseout) desaparece ...
  #1 (permalink)  
Antiguo 03/06/2011, 11:29
 
Fecha de Ingreso: febrero-2004
Ubicación: Mediterraneo
Mensajes: 64
Antigüedad: 16 años, 8 meses
Puntos: 2
Se colapsa la animación

Os pongo un código supersencillo de prueba. Simplemente cuaando el ratón se pone sobre(mouseover) la capa "uno" muestra la capa "dos" y cuando sale(mouseout) desaparece la capa"dos".

El problema es que cuando pasas de forma veloz sobre la capa "uno" el raton deja de visionarse la capa "dos", es como si se colapsara el efecto.

Sucede exactamente igual con animate().


En este caso la función stop() evita que la animación o efecto de repita si pasas varias veces seguidas el raton por la capa "uno".

¿Como conseguir que, aunque se pase el puntero varias veces seguidas y con rápidez por la capa "uno", el efecto se mantenga de forma correcta?


No se si me he explicado bien... pero esa es la pregunta ... Saludos


Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tarot Ok</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
   $('#uno').mouseover( function(){
		$('#dos').stop().show(300);
				        })
		$('#uno').mouseout( function(){
	    $('#dos').stop().hide(300);
				});
});									
 </script>
   
 <style>
#dos {
	display:none;
	}
</style>

<div id="uno" style="padding:10px; background-color:#6CF; width:50px; text-align:center; cursor:pointer;">Uno</div>
<div id="dos" style="padding:10px; background-color:#CC6; width:50px; text-align:center; cursor:pointer;">Uno</div>
</body>
</html> 
  #2 (permalink)  
Antiguo 03/06/2011, 11:54
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 11 años, 11 meses
Puntos: 66
Respuesta: Se colapsa la animación

intenta algo asi:

Código Javascript:
Ver original
  1. $('#uno').mouseover( function(){
  2.         $('#dos')css('display','block').stop().animate({opacity:1});
  3.                         })
  4.         $('#uno').mouseout( function(){
  5.         $('#dos').stop().animate({opacity:0}, function(){
  6. $(this).css('display','none');
  7. });
  8.                 });
  9. });
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D
  #3 (permalink)  
Antiguo 03/06/2011, 12:10
 
Fecha de Ingreso: febrero-2004
Ubicación: Mediterraneo
Mensajes: 64
Antigüedad: 16 años, 8 meses
Puntos: 2
Respuesta: Se colapsa la animación

Gracias tredio por tu respuesta

En efecto, de esta manera no se produce el "colapso" en la animación.



Un Saludo.

Última edición por almez; 03/06/2011 a las 12:28
  #4 (permalink)  
Antiguo 03/06/2011, 12:30
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 11 años, 11 meses
Puntos: 66
Respuesta: Se colapsa la animación

de nada amigo, saludos.
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D

Etiquetas: jquery
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 16:53.