jQuery 过渡？答案

【问题标题】：jQuery Transitions?jQuery 过渡？
【发布时间】：2013-01-04 19:45:36
【问题描述】：

我想使用 jquery 来访问 li 元素上的悬停状态。在悬停在它上面之前，它是灰色的。当您将鼠标悬停在它上面时，它会变成红色并带有下划线。您可以在 css 中执行此操作，但诀窍是我希望它从 li 的左侧过渡到右侧，因此它看起来像是在滑动颜色。

【问题讨论】：

What Have You Tried?
到目前为止，您有一些代码吗？我很乐意看看。
li { display: inline;颜色：#999;填充：5px； } li:hover{ 颜色:#df2724;文字装饰：下划线； }
我可以做转换：所有 1s 线性；但我希望在 jQuery 中从左到右进行转换，我还没有足够的知识来做到这一点：/ 我正在考虑改变悬停状态到一个类，只需在悬停时在 jquery 中添加类，然后为过渡设置动画

【解决方案1】：

如果你在谈论动画 li 的下划线：

创建一个细的（2px 高，li 的宽度）红色 div，其中包含一个细（相同大小）的白色 div。您应该只能看到白色，完全覆盖红色 div。

确保红色 div 具有溢出：隐藏为 css 属性。然后做一个 jQuery 动画，将白色的 div 向右移动，创建一条红线慢慢地在 li 下划线的错觉。当有人将鼠标悬停在任何 li 上时，找到最近的“红/白”嵌套 div 并在白色 div 上执行动画。有点像这样：

$("li").hover(function(){
    $(this).next('div').children('div').animate({left: (width of div)px});
});

next('div') 找到红色的 div，然后 children('div') 找到里面的白色 div。 animate 函数将白色 div 移开，露出红色 div。

【讨论】：

我刚刚注意到你说的是 li 本身有动画，而不是下划线。相同的概念，但您必须使用嵌套的 div（不同颜色，重叠）作为 li 内的背景才能达到预期的效果。
是否有动画从左到右的悬停状态？抱歉，我不熟悉 javascript/jquery。
不幸的是，完成该动画的唯一方法是使用这些嵌套的 div 和 animate() 函数，或类似的想法。最困难的部分是理解 DOM 并使用 next()、parent() 和 children() 遍历它。祝你工作顺利。

【解决方案2】：

你试过这个例子吗：

【讨论】：

【解决方案3】：

最好有一个li 维度中所需颜色的背景图像。这样就可以在mouseover 和mouseout 事件li 时制作动画效果。在鼠标悬停时，将背景图像从一些“-”的背景位置设置为 0，而在鼠标移开时则相反。

【讨论】：