JS Nav Hover行动http://barnumdesign.com/x/about

Question

我正在尝试获得这样的导航悬停效果：http://joseavillez.pt/

导航背景已满。

任何指导？

我尝试使用以下代码来定位它，但我不确定是什么问题：

---

JS函数

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样式

#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

我不确定这是否可以解决您的问题，但这是我写的方式：

$('#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});
        });