Fade images jQuery

Out of context: Reply #4

• Started
• Last post
• 5 Responses

• iamjustoneman0

  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 none list items, for example, I am trying to fade two images for a contact graphic:

  <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... no-repeat 0 0;
  width:285px;
  height:54px;
  display:block;
  }

  I think the bit that is failing me is the jQuery side of things, looking at the small bit of code, looks like it looks for the primary_navigation and uses the list items too, how can I add to this?

  Appreciate any help.

  Thanks

  iamjustoneman 0Permalink

  UpvoteDownvote

  Flag

  Show [[ numHiddenNotes ]] more notesAdd Note

  SaveCancel

View thread