Cita:
Iniciado por Banditolane
Código:
$('#opcion_password').hover( function() {
$('#hint_menu_superior').stop(true).html('Te ayudamos a recuperar tu password');
$('#hint_menu_superior').stop(true).slideDown();
},function() {
$('#hint_menu_superior').empty();
$('#hint_menu_superior').stop(true).slideUp();
});
El problema que tienes ahí es que que al hacer el mouseout cuando el slide está al 50% va a quedar con una altura del 50% por el stop y al volver a entrar va a quedar cortado.
Hice uno usando animate modificando el alto y para que cuando hagan mouseout y esté por la mitad se cierre desde ese lugar y no tenga que terminar :), tiene un delay para que no se muestre si se pasa el cursor rapidamente al estar navegando.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$( function (){
$('#opcion_password').hover( function (){
$("#hint_menu_superior").delay(500).animate({height:'100px'}, 1000);
},
function (){
$("#hint_menu_superior").stop(true).animate({height:'0px'}, 1000);
});
});
</script>
<style>
#hint_menu_superior{height:0px; width:250px; background:red; overflow:hidden }
</style>
</head>
<body>
<a href="#" class="opcion_menu_superior" id="opcion_password">¿Olvidaste tu password?</a>
<div id="hint_menu_superior">Te ayudamos a recuperar tu password</div>
</body>
</html>
el método delay está disponible desde jquery 1.4 si usan una versión anterior se puede usar un animate con algo que no se modifica como opacidad al 100% jeje