Jquery Effect only runs once, won't repeat

Jquery Effect only runs once, won't repeat

Hi, I'm making a website at http://adc-design.com and I'm trying to create a menu using Jquery 1.3.2. Anyways, if you look at the tabs in my header, they have an effect but it only works once. After I mouse over the same tab a second time, they do not animate. I also have a similar menu at http://adc-design.com/dev/index.html which uses drupal 1.4.2. You may notice the second menu also will fade to a darker gray. If i copy and past that code into my drupal block, it will still only animate one time. Do i need to include something extra because its version 1.3.2??? I also have another Jquery plugin below the header which is called a S3SLIDER. I'm not calling the jquery script up more than once. 
Here's the code for the Jquery menu at adc-design.com:
  1. <head>
  2. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  3. <title>Nice Menu : CSS Animation & jQuery Animate</title>
  4. <link rel="stylesheet" type="text/css" media="screen, projection" href="/demo.css" />
  5. <script type="text/javascript" src="/modules/jquery_ui/jquery.ui/jquery-1.3.2.min.js"></script>
  6. <script type="text/javascript" src="/jquery.color.js"></script>
  7. <script type="text/javascript">
  9. $(document).ready(function() {
  11. $('#menu-jquery li a').hover(
  13. function() {
  15. $(this).css('padding', '6px 25px')
  16. .animate({'paddingLeft' : '50px', 
  17. 'paddingRight' : '15px', 
  18. 'backgroundColor':'rgba(0,0,0,0.5)'}, 
  19. 'fast');
  20. }, 
  22. function() {
  24. $(this).css('padding', '6px 25px')
  25. .animate({'paddingLeft' : '50px', 
  26. 'paddingRight' : '15px', 
  27. 'backgroundColor' :'rgba(0,0,0,0.2)'}, 
  28. 'fast');
  30. }).mousedown(function() {
  32. $(this).animate({'backgroundColor': 'rgba(0,0,0,0.1)'}, 'fast');

  34. }).mouseup(function() {
  36. $(this).animate({'backgroundColor': 'rgba(0,0,0,0.5)'}, 'fast');
  37. });
  38. });
  40. </script>
  41. </head>
  42. <body>
  43. <div id="container2">
  44. <div id="container">
  45. <ul id="menu-jquery">
  46. <li><a href="#">Home</a></li>
  47. <li><a href="#">About</a></li>
  48. <li><a href="#">Portfolio</a></li>
  49. <li><a href="#">Contact</a></li>
  50. </ul>
  51. </div>
  52. </BODY>
And here is the code for the menu that works properly:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <title>Nice Menu : CSS Animation & jQuery Animate</title>
  7. <link rel="stylesheet" type="text/css" media="screen, projection" href="demo.css" />
  8. <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
  9. <script type="text/javascript" src="jquery.color.js"></script>
  10. <script type="text/javascript">
  12. $(document).ready(function() {
  14. $('#menu-jquery li a').hover(
  16. function() {
  18. $(this).css('padding', '2px 25px')
  19. .animate({'paddingLeft' : '40px', 
  20. 'paddingRight' : '10px', 
  21. 'backgroundColor':'rgba(0,0,0,0.5)'}, 
  22. 'fast');
  23. }, 
  25. function() {
  27. $(this).css('padding', '2px 20px')
  28. .animate({'paddingLeft' : '25px', 
  29. 'paddingRight' : '25px', 
  30. 'backgroundColor' :'rgba(0,0,0,0.2)'}, 
  31. 'fast');
  33. }).mousedown(function() {
  35. $(this).animate({'backgroundColor': 'rgba(0,0,0,0.1)'}, 'fast');

  37. }).mouseup(function() {
  39. $(this).animate({'backgroundColor': 'rgba(0,0,0,0.5)'}, 'fast');
  40. });
  41. });
  43. </script>
  44. </head>
  45. <body>
  46. <div id="container">
  47. <ul id="menu-jquery">
  48. <li><a href="#">Home</a></li>
  49. <li><a href="#">About</a></li>
  50. <li><a href="#">Portfolio</a></li>
  51. <li><a href="#">Contact</a></li>
  52. </ul>
  53. </BODY>
I do not know what to do, please help! thanks, austin.