Problems using jquery transit properly

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:


<script>
$(document).ready(function(){

    $(".nav").mouseenter(function() {
        $('.nav').transition({ y: '-40px' });

    });

    $(".nav").mouseleave(function() {
        $('.nav').transition({ y: '0px' });

    });

}); //END
</script>

STYLE:


.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:


<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>

Hi,

You really don’t need to use an additional library for this.
Here’s an example doing what you want, just using .animate()

The trick here (which also applies if you are using Transit), is to attach the eventHandler to the <li> element and set its display property to inline-block.

<!doctype html>
<html>
  <head>
    <base href="http://clestportfolio.zz.mu/Transit/" />
    <title>Transit Test</title>
    <link rel="stylesheet" href="css/960_12_col.css" />
    <link rel="stylesheet" href="style.css" />
    <style>
      #home{background:blue; display:inline-block;}
      #home a{position: relative;}
    </style>
  </head>
  <body>
    <div class="container_12">
      <div class="grid_4">
        <div class="box1">
          <ul class="nav">
            <li id="home"><a href="#" title="Home">Home</a></li>
            <li id="about"><a href="#" title="About">About</a></li>
          </ul>
        </div>
      </div>
    </div>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
      $("#home").hover(function(e) {
        if(e.type === "mouseenter"){
          $("#home > a").animate({ 'top': -50});
        } else {
          $("#home > a").animate({ 'top': 0});
        }
      });
    </script>
  </body>
</html>

Here’s a demo. I’ve set the background colour of the <li> element, so that you can see what’s going on.