鼠标滑过图片变大，移开还原大小的动画效果

css:

.nav{width:870px;margin:433px auto 0 auto;}
.nav li{width:99px;height:99px;float:left;margin-right:10px; display:inline; position:relative;}
.nav li img{ position:absolute;left:0;top:0;width:99px;height:99px;}
.nav li.last{margin:0;}
.nav li.liOne{margin-top:32px;}
.nav li.liTwo{margin-top:46px;}
.nav li.liThree{margin-top:61px;}

html:

<nav class="nav">
 <ul>
  <li ><a href="<{$public_link_url_config.resource}>"><img src="/static/images/master/homenav1.png" /></a></li>
  <li class="liOne"><a href="#"><img src="/static/images/master/homenav2.png" /></a></li>
  <li class="liTwo"><a href="<{$public_link_url_config.video}>"><img src="/static/images/master/homenav3.png" /></a></li>
  <li class="liThree"><a href="<{$public_link_url_config.laboratory}>"><img src="/static/images/master/homenav4.png" /></a></li>
  <li class="liThree"><a href="#"><img src="/static/images/master/homenav5.png" /></a></li>
  <li class="liTwo"><a href="<{$public_link_url_config.software}>"><img src="/static/images/master/homenav6.png" /></a></li>
  <li class="liOne"><a href="#"><img src="/static/images/master/homenav7.png" /></a></li>
  <li class="last"><a href="<{$public_link_url_config.cloud}>"><img src="/static/images/master/homenav8.png" /></a></li>
 </ul>
<div class="cl"></div>
</nav>

JS:

$(document).ready(function() {
       
   $(".nav img").hover(function() {
    $(this).parent().parent().css("z-index", 10);
    $(this).stop().animate({
       height: "140",
       width: "142",
       marginTop: "-22px",
       marginLeft: "-22px"
    });
    
   }, function() {
    $(this).parent().parent().css("z-index", 1);
    $(this).stop().animate({
     height: "99",
     width: "99",
     marginTop: "0px",
     marginLeft: "0px"
    });
    
   });
  
    });