Animation funktioniert nicht

<html>
<head>
<style type="text/css">
	.asz {
		background-color: #dedede;
		width: 200;
		height: 100;
		z-index: 0;
		marign: 0;
		padding: 0;
	}
	.asz #as {
	list-style:none;
	z-index: 1;
    position: relative; 
    top: 10px; 
    left: 0px; 
	width: 200px;
	height: 80px;
	float:left;
	background-color: #AAA;
}
	.asz #as2 {
	list-style:none;
	z-index: 2;
    position: relative; 
    top: 10px;
    left: 0px;
	width: 0px;
	height: 80px;
	float:left;
	background-color: #FFF;
}
</style>
    <script language="javascript">
		var i =0;
		function goLeft() 
		{ 
         if ( document.getElementById ) {
				document.getElementById('as').style.width = 200 - i + "px"; 
				document.getElementById('as').style.left = i/320+"px";
				document.getElementById('as2').style.width = i + "px";
			} 


		 i = i + 10; 
        
          
         if ( i < ( 210 ) ) 
         { 
            window.setTimeout( 'goLeft()', 40 ); 
         } 
		}
		
		
		function goRight() 
		{ 


          if ( document.getElementById )
         {
				document.getElementById('as').style.width = i + "px"; 
				document.getElementById('as').style.left = i/320+"px";
				document.getElementById('as2').style.width = i + "px";
		} 


		 i = i - 10; 
        
          
         if ( i > ( -10 ) ) 
         { 
            window.setTimeout( 'goRight()', 40 ); 
         } 
		}
    </script>
</head>
<div align="center">
	<ul class="asz">
		<li id="as2" onclick="goRight()">
		</li>
		<li id="as" onclick="goLeft()">
		</li>
	</ul>
</div>
</body>
</html>