jquery - 将 JQuery 与图像 Sprite 一起使用

Question

我目前正在使用 CSS 和图像 Sprite 进行导航(代码如下)。 这按预期工作，但我想通过淡入淡出来缓解这种过渡。

我认为为此最好使用 JQuery，但是我想保留 CSS 以添加对禁用 Javascript 的支持。谁能指出我如何实现这种“合作”的正确方向？!

HTML:

<ul id="menu">
    <li id="home"><a href="#"></a></li>
</ul>

CSS:

nav
{
    margin-top: 17px;
    float: right;
}

nav #menu
{
    display: block;
    height: 22px;
    margin: 0px;
    padding: 0px;
}

nav #menu li
{
    list-style-type: none;
    float: left;
    padding-left: 28px;
}

nav #menu li a
{
    background: url(/Content/Images/navigation.png) no-repeat;
    height: 22px;
    display: block;
}

nav #menu #home 
{
    width: 53px;
}

nav #menu #home a:hover
{
    background-position: 0 -22px;
}

Answer 1

我会做以下两件事之一:

1) 在 jQuery 中试验 animate 函数。
2) 在 li 中创建一个包装器:

<ul>
    <li><span class="bg-image" /><a href="#"></li>
</ul>

然后像这样使用 jQuery:

$(document).ready(function () {
    $("#menu li a").bind("mouseover", function () {
        $(this).siblings("span.bg-image").css("background", "url(URL TO IMAGE)").hide().fadeIn(100);
    })
});

重复并使用不热的图像进行鼠标移出。我假设您会为非热状态使用透明占位符类型的图像，确保热状态的宽度/高度相同。