perfeccionar codigo javascript

willhemsv · #1 (**permalink**) 15/07/2011, 09:08

Hola amigos, miren tengo el siguiente codigo que estaba probando, la verdad es que cumple, aunque no al 100%, lo que yo quiero que cumpla, me gustaría perfeccionar detalles de las acciones, como por ejemplo que yo al hacer mouseout del cuadro este vuelva desde el punto donde esta hacia la configuración original. sin tener que esperar a que finalice la acción para recien ahi volver, ya que si yo hago mouseout a mitad de camino, este va moverse bruscamente, en el fondo quiero darle continuidad. espero explicarme bien

aqui les dejo el codigo para que lo puedan ver, esta con los css incluidos para que no haya problemas.

Pd: pueden probar el código en el siguiente link: http://www.w3schools.com/html/tryit....=tryhtml_basic

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>One Web Chile</title>
<link type="text/css" rel="stylesheet" href="css/newcss.css" />
<script language="javascript" type="text/javascript">
	function mover(anterior){
			i = anterior - 1; 
			newmargin = -i;
			document.getElementById("margen").value = newmargin,
			document.getElementById("cortina").style.marginTop = newmargin + "px";
			
			
			if(i >= 1){
				t = setTimeout("mover(i)",5);	
			}
			if(i == 1){
				clearTimeout(t);
			}
	}
	function remover(anterior){
			i = anterior + 1; 
			newmargin = -i;
			document.getElementById("margen").value = newmargin,
			document.getElementById("cortina").style.marginTop = newmargin + "px";
			
			
			if(i <= 201){
				t = setTimeout("remover(i)",5);	
			}
			if(i == 2001){
				clearTimeout(t);
			}
		}
</script>
</head>

<body>
<!--Header Begin-->
	<div style="border-bottom:solid; border-bottom-width:1px; border-bottom-color:#999; z-index:10;"> 
		<img src="imagenes/logo/definitivo2.png" width="300" height="180" style="margin-left:200px; z-index:5;"/>
        <span style="vertical-align:80px; font-size:20px; font-weight:bold; color:#666; z-index:8; ">
			
        </span>
    </div>
<!--Header End-->
<!--Content Begin-->
<div style="height:600px;">
<span>contenido</span>
<div   style="border:solid; border-width:1px; width:200px; height:200px; margin-left:50px; z-index:5;"><!--contenedor de cortina y fondo-->
    <div onmouseout="remover(0)" id="cortina" style="border:solid; border-width:1px; border-color:red; height:200px; z-index:3; margin-top:-201px;">
    	cortina
    </div>
    <div onmouseover="mover(201)" id="original" style="border:solid; border-width:1px; border-color:green; height:200px;z-index:2;">
    	fondo original
    </div>
</div>
<input type="text" id="margen" />
</div>
<!--Content End-->
<!--Footer Begin-->
<div style="border-top:solid; border-top-width:1px; border-top-color:#999;">
pie de pagina
</div>
<!--Footer End-->
</body>
</html>

Saludos y Gracias de antemano.