Ver Mensaje Individual
  #1 (permalink)  
Antiguo 22/01/2011, 05:49
rsb17
 
Fecha de Ingreso: mayo-2008
Mensajes: 105
Antigüedad: 15 años, 10 meses
Puntos: 0
Pausa despues de un jQuery animate()

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?