两个(类)和(类)之间的平滑过渡:悬停

Question

是否有脚本/方式,使普通的CSS :hover更流畅？

想法是,你有两个类可能有渐变背景,脚本可以顺利交换类.所以渐变看起来就像按下按钮一样.应该是自动的,所以你调用触发器:$('.someclass').SmoothTransition();它会自动使用.someclass:hover作为第二个类.

---

赏金编辑

这实际上是一个非常有趣的问题,得到了我的部分答案.我的答案的问题是,它仅适用于纯色背景颜色,不适用于CSS渐变或任何其他更具体的参数.

这个脚本应该是任何jQuery开发者库中的"必备".所以,我向任何人提供150个代表,他们可以想办法或找到好的资源,可以做到这一点.

如果您的方法(单个jQuery插件)适用于所有这些示例,那么您就赢了!

示例:http://jsfiddle.net/4pYWD/

---

现代编辑

由于这个问题在2011年被问到,当CSS过渡时,商业游戏不是一种选择.然后明白,为什么一切都集中在JS而不是CSS,在这个问题上.从这些答案中,我开发了一个JS脚本,当时是完美的.它不再是,CSS转换现在是最终的解决方案,所以正确的答案被重新接受.

Answer 1

您可以使用css3过渡来实现这一目标.

一个例子:

a {
    color: blue;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

a:hover {
    color:yellow;
}

你可以在这里看看这个.

示例使用静态颜色,但您也可以使用css3渐变:

a {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
    background: -moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
}

a:hover {
    background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
    background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
}