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

2019年8月1日 195次阅读

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

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

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

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

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

最佳答案 实现此目的的真正方法是使用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中实现它们,让不支持转换的浏览器优雅地降级.虽然你今天不会得到很好的浏览器支持,但是随着时间的推移,你将无需付出额外的努力.

渐进增强是Web开发人员最好的朋友.特别是在这个时代,新技术,新设备和新浏览器每周都会出现.

点赞