He creado un pequeño carrusel que se activa cuanto pulsas cualquier tecla. Pero cuando llega al final si pulsas las teclas demasiado rapido no detecta bien la informacion y se pasa de largo. Si para la animacion, pongo la velocidad a 0, o pulso las teclas despacio funciona correctamente. Lo que no se es como conseguir que cuando termina la animacion haga una especie de pausa o algo asi para que pueda detectar correctamente el css y reiniciar el carrusel cuando deba. He preobado cin un setTimeOut.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
*{margin: 0;padding: 0;}
.contenedor_carrusel{height: 250px;width: 800px;background-color: #abc;position: absolute;overflow: hidden;clear: both !important;}
.carrusel{position:absolute;background-color:lime;width:800px;clear: both !important;}
.elemento{height: 250px;width: 200px;float: left;}
.elemento span{background-color: blue;width: 180px;height: 230px;margin: 10px;display: inline-block;color: #fff;text-align: center;font-weight: bold;font-size: 100px;}
</style>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.js"></script>
<script type="text/javascript">
var velocidad_animacion = 600;
$(document).ready
(
function()
{
cantidad_elementos = $(".contenedor_carrusel .elemento").length;
$(".contenedor_carrusel").css("width", ($(".elemento").width()*4)+"px");
$(".carrusel").css("width", ($(".elemento").width()*cantidad_elementos)+"px");
$(".carrusel").css("left", "0px");
$(document).keydown
(
function(event)
{
if(parseFloat($(".carrusel").css("left"))<=+parseFloat('-'+($(".carrusel").width()-(4*$(".elemento").width()))))
{
$(".carrusel").animate({"opacity": "0"}, velocidad_animacion, function(){$(".carrusel").css("left", parseFloat($(".carrusel").css("left"))-parseFloat($(".carrusel").css("left"))+"px");$(".carrusel").animate({"opacity": "1"}, velocidad_animacion)});
}
else{$(".carrusel").animate({"left": "-="+($(".elemento").width())+"px"}, velocidad_animacion);}
}
)
;
}
)
;
</script>
</head>
<body>
<div class="contenedor_carrusel">
<div class="carrusel">
<div class="elemento"><span>1</span></div>
<div class="elemento"><span>2</span></div>
<div class="elemento"><span>3</span></div>
<div class="elemento"><span>4</span></div>
<div class="elemento"><span>5</span></div>
<div class="elemento"><span>6</span></div>
<div class="elemento"><span>7</span></div>
</div>
</div>
</body>
</html>
¿Alguna idea?