Hola compañeros,
intento hacer que un recuadro baje al evento click y vuelva a su posicion inicial al sacar el mouse fuera de ese recuadro o capa.
Lo estoy haciendo con .animate() de jQuery, el recuadro se desplaza para abajo al hacer click pero de seguido vuelve a su posicion pese a que no saco el mouse del recuadro y el z-index está al máxmo en mi CSS.
Os paso el código para que lo testeeis y me comenteis si veis cual es el fallo o donde me equivoco.
Código PHP:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="es" lang="es">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
//Sesiones
$('#registro').click(function(){
$("#registro").animate({
top: "0px"
}, 1000);
});
$('#registro').mouseout(function(){
$("#registro").animate({
top: "-55px"
}, 600);
});
});
//-->
</script>
</head>
<body style="margin:0;">
<div style="background:#333;height:200px;width:600px;">
<div id="registro" style="position:absolute;top:-55px;left:50px;width:177px;height:70px;z-index:9999;background:#FFF;">
<p>Hola</p>
</div>
</div>
</body>
</html>
Gracias de antemano ;)