javascript - 为列表项导航淡出旧图像并淡入新图像

Question

我为每个列表项(家庭、服务和联系人)创建了一个 sprite 图像。我正在使用 CSS 在悬停时移动位置。它工作正常，除了我想淡化过渡而不是快速移动位置。我想让它看起来像按钮在悬停时被插入。我想放慢速度。我整天都在做这件事，但一无所获。感谢您的帮助!

HTML

<ul id="navigation">
<li class="link1"><a href="index.html">Home</a></li>
<li class="link2"><a href="services.html">Services</a></li>
<li class="link3"><a href="contact.html">Contact</a></li>
</ul>

CSS

li.link1 {
text-indent: -9999px;
background-image: url(../images/home.png);
background-repeat: no-repeat;
height: 15px;
width: 66px;
background-position: left top;
}
li.link1:hover {
background-image: url(../images/home.png);
background-repeat: no-repeat;
height: 15px;
width: 66px;
background-position: left bottom;   
}
li.link2 {

Repeats itself...

Answer 1

你能用相对定位和 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;
}

演示:
http://jsfiddle.net/jtbowden/gP9kD/

使用所有三个链接和 li 元素的简化 CSS 更新演示:
http://jsfiddle.net/jtbowden/gP9kD/1/

jQuery

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

http://jsfiddle.net/jtbowden/gP9kD/4/

此示例创建每个 li 的克隆，更改背景定位，并将它们绝对定位在当前 li 元素下并隐藏它们。然后在悬停时，它淡出主要的 li(几乎为零，因此它仍然保持事件状态)，并淡入下面的那个。

这有点 hacky，因为 li 克隆仍然包含链接等。但它有效，并演示了原理。