Animate Hover Problem

Animate Hover Problem

I am trying to implement something like this example in a web page:


However I am using jquery-1.8.3.js and I think this example uses an earlier version.

  1. <html>
  2. <head>
  3. <title>the title</title>
  4.    <script type="text/javascript" src="../../Scripts/jquery-1.8.3.js"></script>
  5.    <script type="text/javascript" src="../../Scripts/jquery-ui-1.9.2.custom.min.js"></script>
  6.    
  7.     <link href="../../Content/styles.css" rel="stylesheet" />
  8.     <!-- jQuery runtime -->

  9.     <link href="../../Content/styles.css" rel="stylesheet" />
  10.     <script type="text/javascript" language="javascript">
  11.        
  12.         $(document).ready(function () {
  13.             $("ul#nav li a").addClass("js");
  14.             $("ul#nav li a").hover(
  15.               function () {
  16.                   $(this).stop(true, true).animate({ backgroundPosition: "(0 0)" }, 200);
  17.                   $(this).animate({ backgroundPosition: "(0 -5px)" }, 150);
  18.                   
  19.               },
  20.               function () {
  21.                   $(this).animate({ backgroundPosition: "(0 149px)" }, 200);
  22.                   
  23.               }
  24.             );

  25.         });
  26.    </script>
  27. </head>
  28. <body>
  29. <div id="container">
  30. <ul id="nav">
  31. <li><a href="#">Home</a></li>
  32. <li><a href="#">About</a></li>
  33. <li><a href="#">Work</a></li>
  34. <li><a href="#">Contact</a></li>
  35. </ul>
  36. </div>

  37.    

  38.   
  39. </body>
  40. </html>

And the CSS:

  1. body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
    	margin: 0; padding: 0; border: 0;
    }
    
    body {
    	background: #f5f0e0 url(images/noise.png);
    }
    
    #container {
    	height: 800px;
    	background: url(images/bg.jpg) center top no-repeat;
    }
    
    ul#nav {
    	width: 700px; margin: 0 auto; text-align: center; overflow: hidden;
    }
    	ul#nav li {
    		float: left; list-style: none; 
    	}
    		ul#nav li a {
    			display: block; width: 97px; height: 77px; 
    			padding: 72px 0 0 0; margin: 0 32px 0 32px;
    			font: bold 16px Helvetica, Arial, Sans-Serif; text-transform: uppercase;
    			color: #9c5959; text-shadow: 0 1px 3px #c4bda6; text-decoration: none;
    			
    			background: url(images/label.png) 0 -149px no-repeat; 
    		}
    			ul#nav li a:hover {
    				background: url(images/label.png) 0 0 no-repeat;
    				color: #eee9d9; text-shadow: 0 2px 3px #4c2222;
    			}
    			
    			ul#nav li a.js:hover {
    				background: url(images/label.png) 0 -149px no-repeat;
    			}

I can't seem to get the animation working.

I don't work with Jquery much, although would like to learn it,

Thanks in advance.

Doug