用jQuery自动动画所有悬停状态

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

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

所以我只是想知道是否有办法让jQuery的（有或没有的jQuery UI）的一个和一间交叉衰减：即徘徊在我的CSS已经定义状态。所有a：悬停状态都按预期工作，但转换过于突然，我想在每个元素的悬停/非悬停状态之间添加淡入转换。

有什么建议吗？这里就是我想设置过渡动画CSS悬停状态的一个例子：

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

来源

2010-09-06 Arne Stephensson

真正的方式做，这是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开发人员的最好的朋友。特别是在这个时代，每周都有新技术，新设备和新浏览器出现。

来源

2010-09-06 17:03:33

是的，但我想今天的动画效果。CSS转换可能是一种渐进式增强，但我可以用JS做同样的事情，并且比Mozilla用户的用户更多。感谢您的信息，但我并不知道CSS转换。看起来很挑剔。在CSS中的动画代码。似乎很麻烦，因为我不想将十六进制代码放入我的JS中。 – 2010-09-06 20:29:40

我结束了这样的打算：

$('#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％不透明度。还有一些停止（）代码在那里，以防止不必要的影响链接。

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

来源

2010-09-06 21:30:24

用jQuery自动动画所有悬停状态

回答

相关问题