css - 缓动元素背景颜色 css 或 jquery

Question

很难找到合适的教程..不知道从哪里开始：

我正在尝试构建的内容

如果您将鼠标悬停在导航菜单上，您会看到每个链接后面的背景从右到左呈现亮粉色。我只是对你如何制作这样的动画感到困惑。谁能指出我正确的方向？

更新：解决了。你不知道在我发布这个问题后 10 分钟我就明白了。

对于任何有兴趣的人，请阅读：.animate()

Answer 1

这是一个使用 CSS 的更简单的解决方案，没有任何 javascript 或 jquery：

http://jsfiddle.net/L6hhj/

所以，基本上我们在链接中有一个 span 元素，它在悬停时将是 100% 宽。您只需要添加一些过渡来为颜色/宽度设置动画：

HTML：

<ul>
    <li><a href=""><span></span><strong>Menu item</strong></a></li>
    <li><a href=""><span></span><strong>Menu item</strong></a></li>
    <li><a href=""><span></span><strong>Menu item</strong></a></li>
</ul>

CSS：

ul li {
    display:block;
}

ul li a {
    display:block;
    position:relative;
    height:30px;
    line-height:30px;
    color:#666;
    transition: all ease-in-out 0.5s;
}

ul li a span {
    position:absolute;
    right:0px;
    width:0px;
    background:red;
    height:30px;
    top:0px;
    transition: all ease-in-out 0.5s;
}

ul li a strong {
    position:relative;
}

ul li a:hover {
    color:#fff;
}

ul li a:hover span {
    width:100%;
}