Sprite rollover effect - mouse out not working

Sprite rollover effect - mouse out not working

The rollover animation works, but when i mouse out there is no animation. It just goes directly back to the up state.

Here's all my relevant code snippets:

  2. <script type="text/javascript">
  3. $(function() {
  4. // set opacity to nill on page load
  5. $("ul#division-nav a").css("opacity","0");
  6. // on mouse over
  7. $("ul#division-nav a").hover(function () {
  8. // animate opacity to full
  9. $(this).stop().animate({
  10. opacity: 1
  11. }, "fast");
  12. },
  13. // on mouse out
  14. function () {
  15. // animate opacity to nill
  16. $(this).stop().animate({
  17. opacity: 0
  18. }, "slow");
  19. });
  20. });
  21. </script>

  23. #division-nav{
  24. width:1050px;
  25. background-image:url(../images/division-nav.jpg);
  26. height:144px;
  27. padding:0;
  28. margin:0;
  29. text-indent:-9999px;
  30. }

  32. #division-nav li a{
  33. display:block;
  34. width:131px;
  35. height:144px;
  36. }

  38. #division-nav li{
  39. list-style:none;
  40. float:left;
  41. }

  43. #automation {width: 131px;}

  45. #communication {width: 131px;}

  47. #automation a:hover {background:url(../images/division-nav.jpg) 0px -144px no-repeat; }
  48. #communication a:hover {background:url(../images/division-nav.jpg) -131px -144px no-repeat; }

  50. <ul id="division-nav">
  51. <li id="automation"><a href="#"><span>asdf</span></a></li>
  52. <li id="communication"><a href="#"><span>asdf</span></a></li>
  53. <li><a href="#">asd</a></li>
  54. <li><a href="#">sdf</a></li>
  55. <li><a href="#">asdf</a></li>
  56. <li><a href="#">asd</a></li>
  57. <li><a href="#">asdf</a></li>
  58. <li><a href="#">asdf</a></li>
  59. </ul>

      • Topic Participants

      • dru6