淡出旧图像并淡入新图像以进行列表项导航

Fade Out Old Image and Fade In New for List Item Navigation

本文关键字：图像 导航 列表 淡入 新图像 淡出      更新时间：2023-09-26

我为每个列表项(家庭、服务和联系人(都有一个精灵图像。我正在使用 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...

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

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

jQuery

如果你想要一个真正的fade效果，你可以用jQuery来做到这一点。 我在这里拼凑了一个例子：

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

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

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

相关文章：