Foros del Web » Programando para Internet » Jquery »

Pausa despues de un jQuery animate()

Estas en el tema de Pausa despues de un jQuery animate() en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 22/01/2011, 05:49
 
Fecha de Ingreso: mayo-2008
Mensajes: 105
Antigüedad: 14 años, 3 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?

Etiquetas: pausa
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:56.