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

前端之家收集整理的这篇文章主要介绍了jquery – 两个(类)和(类)之间的平滑过渡:悬停前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否有脚本/方式,这使得普通的CSS:悬停更加流畅?

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

赏金编辑

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

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

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

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

现代编辑

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

解决方法

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

一个例子:

  1. a {
  2. color: blue;
  3. -webkit-transition: all 0.5s ease-in-out;
  4. -moz-transition: all 0.5s ease-in-out;
  5. -o-transition: all 0.5s ease-in-out;
  6. -ms-transition: all 0.5s ease-in-out;
  7. transition: all 0.5s ease-in-out;
  8. }
  9.  
  10. a:hover {
  11. color:yellow;
  12. }

你可以看看这个活着的here.

示例使用静态颜色,但您也可以使用css3 gradients

  1. a {
  2. -webkit-transition: all 0.5s ease-in-out;
  3. -moz-transition: all 0.5s ease-in-out;
  4. -o-transition: all 0.5s ease-in-out;
  5. -ms-transition: all 0.5s ease-in-out;
  6. transition: all 0.5s ease-in-out;
  7. background: -webkit-linear-gradient(left,#2F2727,#1a82f7,#2F2727);
  8. background: -moz-linear-gradient(left,#2F2727);
  9. }
  10.  
  11. a:hover {
  12. background: -webkit-linear-gradient(left,#1a82f7 5%,#1a82f7 95%,#2F2727);
  13. }

猜你在找的jQuery相关文章