使用jQuery自动设置所有悬停状态的动画

在我的新网站上，我有几个不同的链接悬停状态。一个交换了一个背景图像的标志。一个为主导航换出不同的背景图像。普通内联链接通过CSS改变背景颜色。我想不出一种方法来自动让所有a标记都优雅地动画到它们的悬停状态

为这些链接类型中的每一种手动编写动画方法似乎都不是很干净或经得起未来考验。把CSS中的背景图片URL和链接颜色放到JS中似乎是不对的。如果有办法使用CSS提供的默认a:hover行为，那么为悬停效果的每个实例创建一个特殊类，然后通过jQuery为该类的添加/删除设置动画，这似乎是不对的

所以我只是想知道是否有某种方法可以让jQuery在使用或不使用jQueryUI的情况下，在CSS中已经定义的a:hover状态和a:hover状态之间切换。所有a:hover状态都按预期工作，但转换太突然，我想在每个元素的悬停/非悬停状态之间添加淡入淡出转换

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

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

---

真正做到这一点的方法是使用CSS转换，它允许浏览器为您处理两种状态之间的所有动画

但是，除了Webkit之外，其他浏览器都不支持这些功能，尽管它们是为Firefox4设计的

如果您想让它们在其他浏览器中工作，可以考虑使用jQuery插件，例如：

就个人而言，我建议不要在JavaScript中实现它们，让不支持转换的浏览器优雅地降级。虽然您现在没有很好的浏览器支持，但随着时间的推移，您会得到支持，而且您完全不需要付出额外的努力

---

渐进增强是web开发人员最好的朋友。尤其是在这个每周都会出现新技术、新设备和新浏览器的时代。

$('#logo, #left_nav li').css({ opacity: 0.6 }); 

$('#logo, #left_nav li').hover(function(){
    $(this).stop().animate();
    $(this).animate({ opacity: '0.99'}, 250);       
    },function(){
    $(this).stop().animate();
    $(this).animate({ opacity: '0.6'}, 250);        
});

这些元素上的背景图像是33%透明的

我在文档中将每个元素的不透明度设置为0.6。准备好获得20%的透明度。已修改徽标，使其相对于此值具有一定的不透明度

悬停时，我将“不透明度”设置回完整值，并设置更改的动画。徽标淡入为100%不透明度，背景淡入为33%不透明度。还有一些停止代码在那里，以防止不必要的影响链

---

我将为内联文本链接添加类似的内容。没有足够的代码来打扰我，特别是如果没有更干净的方法在jQuery中的所有链接上获得相同的效果。

是的，但我现在想要动画效果。CSS转换可能是一种渐进式的增强，但我可以用JS做同样的事情，并且比Mozilla用户接触到更多的受众。谢谢你提供的信息，我不知道CSS转换。看起来很挑剔。CSS中的动画代码。看起来很麻烦，因为我不想把十六进制代码放到我的JS中。