jquery淡入精灵的悬停图像

比如，我有基于精灵图像的ulli导航

还有悬停图像。我想要一个鼠标悬停功能，用于更改类别的每个项目，即带有淡出和淡入的nav1hover

---

有人有什么建议吗？提前thx。

最好同时显示两种导航状态，请参见示例

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

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

我在这里所做的是将链接的正常状态添加到

元素，并在

的背景中添加悬停状态

然后，脚本在悬停时淡入正常状态，如下所示：

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

---

请在JSFIDLE中修复您的映像路径，它将清楚地帮助您。

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