Pausa despues de un jQuery animate()

rsb17 · #1 (**permalink**) 22/01/2011, 05:49

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?