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.

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

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

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

  41.    

  43.   
  44. </body>
  45. </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