Javascript 淡出旧图像和淡入新图像用于列表项导航

我为每个列表项（家庭、服务和联系人）都有一个精灵图像。我正在使用CSS移动悬停上的位置。它的工作很好，除了我想淡出过渡，而不是快速移动的立场。我试图使它看起来像按钮被按下悬停。我想放慢速度。我花了一整天的时间在这件事上，却一事无成。谢谢你的帮助

HTML

---

你能用相对定位和CSS3转换吗

li.link1 {
    position: relative;
    text-indent: -9999px;
    background-image: url(http://www.rjdesigns.net/temp/images/home.png);
    background-repeat: no-repeat;
    height: 15px;
    width: 66px;

     transition: margin 0.25s;
     -moz-transition: margin 0.25s; /* Firefox 4 */
     -webkit-transition: margin 0.25s; /* Safari and Chrome */
     -o-transition: margin 0.25s; /* Opera */
}

li.link1:hover {
    background-position: left bottom;

    // These lines add height to the top of the li, so it doesn't 
    // glitch/vibrate if you hover on the top pixel or two
    border-top: 2px solid transparent;
    top: -2px;

    // Increase margin by 2px on top and left
    // Decrease by 2px on right so you don't shift other menu items
    margin: 2px -2px 0 22px !important;
}

演示：

为

li

元素更新带有所有三个链接和简化CSS的演示：

jQuery

如果想要真正的

淡入淡出效果，可以使用jQuery实现。我在这里拼凑了一个例子：


此示例创建每个
li
的克隆，更改背景位置，并将其绝对定位在当前
li
元素下并隐藏。然后在悬停时，它将主
li
淡出（几乎为零，因此它仍保持活动状态），并在下面的一个淡出

这有点麻烦，因为
li
克隆仍然包含链接等，但它可以工作，并演示了原理。
你能用相对定位和CSS3转换来完成吗

li.link1 {
    position: relative;
    text-indent: -9999px;
    background-image: url(http://www.rjdesigns.net/temp/images/home.png);
    background-repeat: no-repeat;
    height: 15px;
    width: 66px;

     transition: margin 0.25s;
     -moz-transition: margin 0.25s; /* Firefox 4 */
     -webkit-transition: margin 0.25s; /* Safari and Chrome */
     -o-transition: margin 0.25s; /* Opera */
}

li.link1:hover {
    background-position: left bottom;

    // These lines add height to the top of the li, so it doesn't 
    // glitch/vibrate if you hover on the top pixel or two
    border-top: 2px solid transparent;
    top: -2px;

    // Increase margin by 2px on top and left
    // Decrease by 2px on right so you don't shift other menu items
    margin: 2px -2px 0 22px !important;
}

演示：


为
li
元素更新带有所有三个链接和简化CSS的演示：


jQuery

如果想要真正的
淡入淡出效果，可以使用jQuery实现。我在这里拼凑了一个例子：


此示例创建每个
li
的克隆，更改背景位置，并将其绝对定位在当前
li
元素下并隐藏。然后在悬停时，它将主
li
淡出（几乎为零，因此它仍保持活动状态），并在下面的一个淡出

这是一个有点黑客，因为
li
克隆仍然包含链接等。但是它可以工作，并演示了原理。
不确定这是否可以用精灵实现……如果解决了问题，我可以将其更改为两个图像。谢谢你能做一个测试用例让我们在某个地方看到吗？你能把你的代码上传到某个服务器上，并给我们发送链接，这样我们就可以看到你的代码当前的功能了吗？另外，如果你想让它看起来像是鼠标悬停时按下的按钮，你不需要图片。你完全可以用CSS3来做。不确定这是否可以用一个精灵…然后我可以把它改成两个图像，如果这能解决问题的话。谢谢你能做一个测试用例让我们在某个地方看到吗？你能把你的代码上传到某个服务器上，并给我们发送链接，这样我们就可以看到你的代码当前的功能了吗？另外，如果你想让它看起来像是鼠标悬停时按下的按钮，你不需要图片。你完全可以用CSS3来实现这一点。嗯，奇怪的是，似乎有一个bug同时出现在顶部和左侧，尽管我找到了这样的文档。使用
margin
尝试上面的编辑，并查看我的演示。请参阅jQuery示例以了解真正的淡入度。嗯，奇怪的是，似乎有一个bug同时在顶部和左侧出现了过渡，尽管我找到了这样的文档。使用
边距
尝试上面的编辑，并查看我的演示。有关真正的淡入淡出效果，请参见jQuery示例。
li.link1 {
    position: relative;
    text-indent: -9999px;
    background-image: url(http://www.rjdesigns.net/temp/images/home.png);
    background-repeat: no-repeat;
    height: 15px;
    width: 66px;

     transition: margin 0.25s;
     -moz-transition: margin 0.25s; /* Firefox 4 */
     -webkit-transition: margin 0.25s; /* Safari and Chrome */
     -o-transition: margin 0.25s; /* Opera */
}

li.link1:hover {
    background-position: left bottom;

    // These lines add height to the top of the li, so it doesn't 
    // glitch/vibrate if you hover on the top pixel or two
    border-top: 2px solid transparent;
    top: -2px;

    // Increase margin by 2px on top and left
    // Decrease by 2px on right so you don't shift other menu items
    margin: 2px -2px 0 22px !important;
}