Question

在我的新网站上，我有几种不同的悬停状态用于链接。一个用于交换徽标的背景图像。一个换出主导航的不同背景图像。普通的内联链接通过CSS更改背景颜色。我无法想出一种方法可以自动将所有 a 标签动态地设置为悬停状态。

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

所以我只是想知道是否有一些方法可以让jQuery（有或没有jQuery UI）在 a 和 a：hover 状态之间进行交叉淡入淡出已在我的CSS中定义。所有a：悬停状态按预期工作，但过渡太突然，我想在每个元素的悬停/非悬停状态之间添加淡入淡出过渡。

有什么建议吗？这是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中实现它们，让不支持转换的浏览器优雅地降级。虽然你今天不会得到很好的浏览器支持，但随着时间的推移，你将无需付出额外的努力。

渐进增强是网络开发者最好的朋友。特别是在这个时代，新技术，新设备和新浏览器每周都会出现。

Answer 2

我最终选择了这样的事情：

$('#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（在document.ready上）以获得20％的透明度。徽标已修改为相对于此值具有一定的不透明度。

在悬停时，我将不透明度设置回完整值并为更改设置动画。徽标淡入100％不透明度，背景淡入33％不透明度。还有一些stop（）代码，以防止不必要的效果链。

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

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

2 个答案: