[nalezhitiy]

Здравствуйте,
в javascript и jquery слабо ориентируюсь. написал маленький код для фото галереи

<ul >
<li><a href="" class="run1">foto 1</a></li>
<li><a href="" class="run2">foto 2</a></li>
<li><a href="" class="run3">foto 3</a></li>
</ul>
<div >
<img src="images/2.png" id="img3" style="position:relative; " />
<img src="images/3.png" id="img2"  style="position:relative; margin-top:-390px; "/>
<img src="images/1.png" id="img1" style="position:relative; margin-top:-690px;z-index:1; " />
</div>

jquery

<style>
.z {z-index:1;} 
 </style>

<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
						    var a = 0;
							var b = 1;
							var c = 2;
		$(".run1").mouseover(function(){
	    $("#img1").animate({ left: "500", opacity: "0.3"}, "slow", function() {$(this).css('z-index', a);} )
	.animate({left: "0", opacity: "1"}, "slow")
	 	 return false;
	      }); 
		$(".run2").mouseover(function(){
	    $("#img2").animate({ left: "500", opacity: "0.3"}, "slow", function() {$(this).css('z-index', b);} )
	.animate({left: "0", opacity: "1"}, "slow")
	      return false; }); 
		$(".run3").mouseover(function(){
	    $("#img3").animate({ left: "500", opacity: "0.3"}, "slow", function() {$(this).css('z-index', c);} )
	.animate({left: "-50", opacity: "1"}, "slow")
	      return false; }); 
		});


</script>

Идея была в том что все фото лежат под одной фотографией. при наведении на ссылку определенное фото с эффектов выезжала и становилась над всеми. Но когда я навожу обратно на ссылки то переход не происходит((((
Помогите начинающему