I'm having a hard time trying to understand or code jquery properly using jquery transit. The objective is to make the links move up if the mouse enters or hovers on the link. Here is what i have done so far

http://clestportfolio.zz.mu/Transit/

SCRIPT:

Code:
<script>
$(document).ready(function(){
    
    $(".nav").mouseenter(function() {
        $('.nav').transition({ y: '-40px' });
          
    });
    
    $(".nav").mouseleave(function() {
        $('.nav').transition({ y: '0px' });
          
    });
    
}); //END
</script>
STYLE:

Code:
.box1{width:200px; height:100px; background-color:red; margin-top:50px; display:block;}
.nav {line-height:100px; text-align:center; }
.nav li{display:inline}
.nav a{text-decoration:none; color:black; background-color:green}
.nav a:hover{color:white; font-size:20px}
MARKUP:
Code:
<div class="grid_4">
         <div class="box1">
             <ul class="nav">
                 <li><a href="#" title="Home">Home</a></li>
                 <li><a href="#" title="About">About</a></li>
             </ul>
         </div>
</div>