Getting a fadein fadeout animation not to affect active state

Getting a fadein fadeout animation not to affect active state

Hello guys, I have a problem with a working sprite that makes the fadein and out effect between states using the span technique, adding an empty span tag inside the anchor with jquery, then the hover image state is added to the span via css, and jquery sets the opacity to "0" when the page loads and animates the fadein with x miliseconds and out again on hover.

My problem is that I have tried everything to prevent this effect from being added to the active state. For example the home is the current tab selected so it has the third state image wich is the active applied and when I hover over it, it shows the hover state and I want it to stay with the active all the time. So surfing the web I got to this article where he uses a body id to add the active state via css and using variables he (I think cause I don't know much about variables yet) tries to find the id on the body and match it with the one in the list item to prevent from adding the effect to that matched li. Any help would be appreciated and sorry for my lousy english, Saludos.




HTML:
  1. <body id="home">

  3. <ul id="nav">
           <li id="home"><a href="index.html" title="Home Page">Home</a></li>
           <li id="portfolio"><a href="portfolio.html" title="Portfolio Page">Portfolio</a></li>
           <li id="contact"><a href="contact.html" title="Contact Form Page">Contact</a></li>
           <li id="about"><a href="about.html" title="About me Page">About me</a></li>
     </ul>





  4. </body>

CSS:
  1. /*Normal State*/
  2. ul#nav li#home a { background-position: left top; width: 112px; }
    ul#nav li#portfolio a { width: 112px; background-position: -112px -297px;}
    ul#nav li#contact a { width: 112px; background-position: -224px -297px; }
    ul#nav li#about a { width: 112px; background-position: -337px -297px; }    



  4. /* Hover state applied to span added by jquery to fake fadein with opacity ^*/

  6. ul#nav li a span {background:url("images/nav.png"); height: 99px; display:block;}


  7. ul#nav li#home a span { background-position:  left -99px;}
    ul#nav li#portfolio a span {background-position:  -112px -99px;}
    ul#nav li#contact a span {    background-position:  -224px -99px;}
    ul#nav li#about a span { background-position:  -337px -99px;}




  10. /* Active state applies this image to current active state based on Id from the body */

  12. #home ul#nav li#home a { background-position:  left bottom;}
    #portfolio ul#nav li#portfolio a {background-position:  -112px bottom;}
    #contact ul#nav li#contact a { background-position:  -224px bottom;}
    #about ul#nav li#about a { background-position:  -337px bottom;}




Jquery:
  1. $(document).ready(function(){

  3.         /* Code used from this article: http://www.tyssendesign.com.au/articles/animated-navigation-items-using-jquery/ */

  4.           // Get the ID of the body
  5.         var parentID = $("body").attr("id");

  6.          // Loop through the nav list items
  7.           $("#nav li").each(function() {

  8.         // compare IDs of the body and list-items
  9.           var myID = $(this).attr("id");

  10. // only perform the change on hover if the IDs don't match (so the active link doesn't change on hover)
            if (myID != "n-" + parentID) {

     




  11.      /* My code to make the fadein and out different from the technique from the article above */

  12.    $("ul#nav li a").wrapInner("<span></span>");
        $("ul#nav li a span").css({"opacity" : 0});
        $("ul#nav li a").hover(function(){
            $(this).children("span").stop().animate({"opacity" : 1}, 500);
        }, function(){
            $(this).children("span").stop().animate({"opacity" : 0}, 500);
            });
       








  13.      }

      });

    });