Fading Images

Fading Images

Hi all,

I followed a tutorial in .net magazine (a UK web design mag) on how to fade images using jQuery. I have followed it and I can now fade images for my menu, problem is, I am not sure how to append the code to all my to fade images for non list items. For example, I have a call to action button (just a telephone number with a graphic, I have used css sprites to add a hover to the graphic, but would now like to fade it using jquery.

The code in the mag seems geared towareds menus only, can somebody help me modify it to include any element. Here is what I currently have:

Hi all,

Still not managed to get this working, here is what I for my menu, which fades the images perfectly:

html:

   <div id="navigation_primary">
                <ul>
                    <li class="home hover"><a href="home">Home</a></li>
                    <li class="services hover"><a href="services">Services</a></li>
                    <li class="work hover"><a href="work">Work</a></li>
                    <!--<li class="blog hover"><a href="blog">Blog</a></li>-->
                    <li class="contact hover"><a href="contact">Contact</a></li>
                </ul>
            </div>


Here is my jQuery:

$(document).ready(function() {
   navigationPrimary();
});

function navigationPrimary() {
   $('#navigation_primary li').removeClass('hover');
   $('#navigation_primary li a')
      .css({ opacity: 1.0 })
      .mouseover(function() {            
         $(this).stop().animate(
            { opacity: 0.0 }
         , 300);
      })
      .mouseout(function() {
         $(this).stop().animate(
            { opacity: 1.0 }
         , 1000);
      });
}


and finally, here is my css:

/*=NAVIGATION PRIMARY - BASE STYLES
-------------------------------------------------------------------------------------------*/   
#navigation_primary {
   height: 66px;
   float:right;
}
#navigation_primary ul {
list-style: none;
padding: 0;
margin: 0;
}
#navigation_primary li {
float: left;
display: block;
height: 66px;
width: 122px;
background: url(../images/menu.png) 0 0 no-repeat;
}

/*=NAVIGATION PRIMARY - LIST ITEM - BACKGROUND POSITIONS
-------------------------------------------------------------------------------------------*/   
#navigation_primary li.home                  { background-position: 0 0;   }
#navigation_primary li.services                  { background-position: -122px 0; }
#navigation_primary li.work             { background-position: -242px 0; }
#navigation_primary li.blog                 { background-position: -362px 0; }   
#navigation_primary li.contact               { background-position: -362px 0;   }

#navigation_primary a {
display: block;
height: 66px;
width: 122px;
text-indent: -9999px;
background: url(../images/menu.png) 0 -132px no-repeat;
}


   
/*=NAVIGATION PRIMARY - ANCHOR - DEFAULT BACKGROUND POSITIONS
-------------------------------------------------------------------------------------------*/
#navigation_primary li.home a                { background-position: 0 -132px;   }
#navigation_primary li.services a                { background-position: -122px -132px; }
#navigation_primary li.work a             { background-position: -242px -132px; }
#navigation_primary li.blog a                { background-position: -362px -132px; }
#navigation_primary li.contact a             { background-position: -362px -132px; }
      
/*=NAVIGATION PRIMARY - ANCHOR - HOVER BACKGROUND POSITIONS
-------------------------------------------------------------------------------------------*/
#navigation_primary li.home.hover a:hover       { background-position: 0 0; }
#navigation_primary li.services.hover a:hover       { background-position: -122px 0; }
#navigation_primary li.work.hover a:hover { background-position: -242px 0;   }
#navigation_primary li.blog.hover a:hover       { background-position: -362px 0;   }
#navigation_primary li.contact.hover a:hover   { background-position: -362px 0; }

/*=NAVIGATION PRIMARY - ANCHOR - CURRENT PAGE BACKGROUND POSITIONS
-------------------------------------------------------------------------------------------*/   
#home #navigation_primary li.home a          { background-position: 0 -66px; }
#services #navigation_primary li.services a          { background-position: -122px -66px; }
#work #navigation_primary li.work a  { background-position: -242px -66px; }
#blog #navigation_primary li.blog a          { background-position: -362px -66px; }
#contact #navigation_primary li.contact a       { background-position: -362px -66px; }


This works a treat but I cannot seem to modify it to work with my regular link:

<a class="action_home" href="contact"><em>We'd love to hear from you</em></a>


The css, which currently works as a regular hover is:
a.action_home {
   background:url(../images/action_home.png) no-repeat 0 0;
   width:285px;
   height:54px;
   display:block;
}



Appreciate any help.

Thanks