JS Nav Hover action http://barnumdesign.com/x/about

Question

Hello

I'm trying to attain a nav hover effect like this: http://joseavillez.pt/

Except with the nav background full.

any guidance?

i've tried using the following code to target it but i'm not sure what's wrong:

---

JS Function

function menusHoverFunction() {
 $('#LeftNav ul li a').each(function() {
  $(this).css({'backgroundPosition' : '-188px'});
  $(this).mouseenter(function(){  
   $j(this).stop().animate({'backgroundPosition' : '0'}, {duration:300});
  });


  $j(this).mouseleave(function(){
   $(this).stop().animate({'backgroundPosition' : '-188px'}, {duration:300});
  });  
 });
}

---

CSS Styles

#LeftNav {
 position: absolute;
 top: 50px;
 right: 0;
 }
#LeftNav ul {
 }
#LeftNav ul li {
 }
#LeftNav ul li.selected {
 }
#LeftNav ul li a {
 font-family: Helvetica;
 font-size: 180%;
 color: #ffffff;
 text-transform: uppercase;
 padding: 8px 30px 0 8px;
 display: block; 
 float: right;
 background: url(/x/images/template/bg-nav-hover.jpg) no-repeat; 
 }
#LeftNav ul li a.active,
#LeftNav ul li a:hover {
 }
#LeftNav ul li ul {
 }
#LeftNav ul li.selected ul {
 }
#LeftNav ul li ul li {
 background: none;
 display: none;
 }
#LeftNav ul li ul li.selected {
 }
#LeftNav ul li ul li a {
 background: none;
 font-size: 120%;
 color: #c2c2c2;
 text-transform: capitalize;
 }

Answer 1

I'm not sure if this fixes your problem, but here's how I'd write it:

$('#LeftNav ul li a')
    .css({ backgroundPosition: '-188px'})
    .hover(function() // mouseenter
        { 
            $(this).stop().animate({ backgroundPosition: '0'}, {duration:300});
        },
        function() // mouseout
        {
            $(this).stop().animate({ backgroundPosition: '-188px'}, {duration:300});
        });