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); 
});