jquery褪色悬停图像的精灵

Question

像http://jsfiddle.net/eFLdd/1/我有ul li导航基于精灵图像。

还有悬停图像。我想要一个鼠标悬停功能，每个项目改变类，即nav1hover与淡出和淡入。

有没有人有一些提示？ thx提前。

Answer 1

将导航的两种状态同时存在会更好，例如参见http://jsfiddle.net/graham/kxpLu/2/。

通过创建导航一个简单的列表：

<ul class="navigation"> 
    <li class="nav1"><a href=""><span></span></a></li> 
    <li class="nav2"><a href=""><span></span></a></li> 
</ul> 

这是风格类似：

.navigation li { 
    background: url(http://blog.grahamlicence.co.uk/jsfiddle/nav.jpg) no-repeat 0 0; 
    width: 80px; 
    height: 20px; 
} 
.navigation li.nav2 { background-position: -82px 0; } 
.navigation li span { 
    background: url(http://blog.grahamlicence.co.uk/jsfiddle/nav.jpg) no-repeat 0 -56px; 
    width: 80px; 
    height: 20px; 
    display: block; 
} 
.navigation li.nav2 span { background-position: -82px -56px;} 

我在这里所做的是添加链接的正常状态到<span>元素并在<li>的背景下悬停状态。

脚本然后淡出正常状态上悬停，像这样：

$(".navigation li a").hover(function() { 
    $(this).children("span").stop().animate({ 
     opacity: 0 
    }, 300); 
}, function() { 
    $(this).children("span").animate({ 
     opacity: 1 
    }, 400); 
});