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>