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

Posted 2023-05-08

【中文标题】使用 jQuery 自动为所有悬停状态设置动画

【英文标题】：Automatically animate all hover states with jQuery

【发布时间】：2011-04-08 20:40:48

【问题描述】：

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

为每种链接类型手动编码动画方法似乎不是很干净（或面向未来）。将我的背景图片 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');

【参考方案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 中实现它们，让不支持转换的浏览器优雅地降级。尽管您今天不会获得很好的浏览器支持，但随着时间的推移您会得到支持，而且您绝对不会付出额外的努力。

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

【讨论】：

是的，但是我想要今天的动画效果。 CSS 过渡可能是一种渐进式增强，但我可以用 JS 做同样的事情，并且比 Mozilla 用户覆盖更广泛的受众。不过感谢您提供的信息，我不知道 CSS 转换。看起来很挑剔。 CSS中的动画代码。似乎很麻烦，原因与我不想将十六进制代码放入我的 JS 中的原因相同。

【参考方案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 中的所有链接产生相同的效果。