jquery - 使用 jQuery 自动为所有悬停状态设置动画

Question

在我的新网站上，我有几种不同的链接悬停状态。一个将背景图像替换为 Logo 。一个人为主导航更换了不同的背景图像。普通的内联链接通过 CSS 改变背景颜色。我无法找到一种方法来自动让所有 a 标签优雅地动画到其悬停状态。

为每种链接类型手动编写动画方法似乎不太干净(或面向 future )。将我的背景图像 URL 和链接颜色(应该在 CSS 中)放入 JS 中似乎并不正确。当可能有办法使用 CSS 提供的默认 a:hover 行为时，为每个悬停效果实例创建一个特殊的类，然后通过 jQuery 为该类的添加/删除添加动画似乎并不正确。

所以我只是想知道是否有某种方法可以让 jQuery(无论有或没有 jQuery UI)在 a 和 a:hover 状态之间交叉淡入淡出已经在我的 CSS 中定义了。所有 a:hover 状态都按预期工作，但转换太突然，我想在每个元素的悬停/非悬停状态之间添加淡入淡出转换。

有什么建议吗？下面是 CSS 悬停状态的一个示例，我想在其中设置过渡动画:

#logo a, #logo a:visited {
 background: url('logo_black.png');
}
#logo a:hover {
 background: url('logo_white.png');
}

Answer 1

真正的方法是使用 CSS 过渡 ( https://developer.mozilla.org/en/CSS/CSS_transitions )，它允许浏览器为您处理两种状态之间的所有动画。

但是，除 Webkit 之外的任何浏览器尚不支持这些功能(尽管 Firefox 4 已计划支持它们)。

如果您希望它们在其他浏览器中工作，您可以考虑使用 jQuery 插件，例如:http://www.azarask.in/blog/post/animation-css-transitions-jquery-easy/

就我个人而言，我建议根本不要在 JavaScript 中实现它们，让不支持转换的浏览器优雅地降级。尽管现在您不会获得很好的浏览器支持，但随着时间的推移，您将获得良好的支持，而且完全不需要您付出任何额外的努力。

渐进式增强是网络开发人员最好的 friend 。特别是在当今新技术、新设备和新浏览器每周都会出现的时代。