recientemente estoy creando un script en el que una capa se mueve hacia abajo al pasar el mouse por otra capa y vuelve a su posición original al quitar el mouse.
Bien, si se pasa el mouse rapidamente varias veces sobre la capa que activa a la capa que se moverá, esta se mueve las veces que se ha cumplido los estados de mouseover o mouseout y queda algo mareoso. Lo ideal sería que no empezará a moverse hasta que no haya terminado de realizar el moviemiento y se tenga de nuevo el evento onmouseover.
Se que se puede porque algunos plugins de jquery como el kwicks lo hacen correctamente lo que explico.
Pongo un ejemplo y haber si sabeis que hay que hacer en el js:
Código PHP:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$('#capa-uno').mouseover(function(){
$("#capa-dos").animate({
width: "500px"
}, 1000);
});
$('#capa-uno').mouseout(function(){
$("#capa-dos").animate({
width: "250px"
}, 600);
});
});
//-->
</script>
</head>
<body>
<div id="capa-uno" style="width:250px;height:100px;background:#F00;">
</div>
<div id="capa-dos" style="width:250px;height:100px;background:#000;">
</div>
</body>
</html>
Saludos.
