jquery 向 .addClass 添加淡入淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2719178/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery add a fade to an .addClass
提问by Nik
How do I fade .addClass in and out.
我如何淡入淡出 .addClass。
Here is the link -
链接在这里 -
http://www.bikramyogajoondalup.com.au/about-bikram-yoga/postures-benefits.html
http://www.bikramyogajoondalup.com.au/about-bikram-yoga/postures-benefits.html
and here is the code -
这是代码 -
$(document).ready(function() {
$('#menu li#Q_01,#menu li#Q_03,#menu li#Q_05,#menu li#Q_07,#menu li#Q_09,#menu li#Q_11,#menu li#Q_13').hover(function() {
$(this).addClass('pretty-hover');
}, function() {
$(this).removeClass('pretty-hover');
});
});
$(document).ready(function() {
$('#menu li#Q_02,#menu li#Q_04,#menu li#Q_06,#menu li#Q_08,#menu li#Q_10,#menu li#Q_12').hover(function() {
$(this).addClass('pretty-hover_01');
}, function() {
$(this).removeClass('pretty-hover_01');
});
});
Thanks
谢谢
采纳答案by Nick Craver
If jQuery UI is an option, you can use .toggleClass(class, duration)for this.
如果 jQuery UI 是一个选项，您可以使用.toggleClass(class, duration)它。
Also, you can probably simplify your selector, it looks like :evenand :oddwill do the job based on your current selector, like this:
此外，您可能可以简化您的选择器，它看起来:even并且:odd将根据您当前的选择器完成工作，如下所示：
$(function() {
$('#menu li:even').hover(function() {
$(this).toggleClass('pretty-hover', 500);
});
$('#menu li:odd').hover(function() {
$(this).toggleClass('pretty-hover_01', 500);
});
});
I realize the above seems backwards, but :evendoes select the firstelement, because it's 0 based, so even selects 0th, 2nd, 4th, etc. I hope you'll agree, makes it a bit easier to maintain :)
我意识到上面的内容似乎是倒退的，但:even确实选择了第一个元素，因为它是基于 0 的，所以甚至选择了第 0、第 2、第 4 等。我希望你会同意，这样维护起来会更容易:)
Edit based on comments- Since .toggleclass()sticks on quick hovers, here's an alternative that works as expected, just a bit longer:
根据评论进行编辑- 由于.toggleclass()坚持快速悬停，这里有一个按预期工作的替代方案，只是稍长一点：
$('#menu li.post:even').hover(function() {
$(this).stop().animate({ backgroundColor: '#009FDD', color: '#FFF' }, 500);
}, function() {
$(this).stop().animate({ backgroundColor: '#FFFFFF', color: '#666' }, 500);
});
$('#menu li.post:odd').hover(function() {
$(this).stop().animate({ backgroundColor: '#623A10', color: '#FFF' }, 500);
}, function() {
$(this).stop().animate({ backgroundColor: '#FFFFFF', color: '#666' }, 500);
});
回答by Dean Harding
If you want to fade the colours of an element, you'll need to use jQuery UIwhich has more advanced support for fading and animating (the core jQuery can only fade/animate integer properties: colours don't work).
如果你想淡出一个元素的颜色，你需要使用jQuery UI，它对淡化和动画有更高级的支持（核心 jQuery 只能淡化/动画整数属性：颜色不起作用）。
It even supports animating all the properties in an entire CSS class, so using jQuery UI, you should be able to achieve the effect you want.
回答by James Wiseman
the jQuery .animatefunction is the best bet, although this won't let you animate between CSS classes - you have to specify the individual styles.
jQuery .animate函数是最好的选择，尽管这不会让您在 CSS 类之间设置动画 - 您必须指定各个样式。
You would be better using the jQquery UI, as this would provide for this sort of functionality, as stated in the jQuery animatepage:
您最好使用 jQquery UI，因为这将提供此类功能，如 jQuery动画页面中所述：
The jQuery UIproject extends the .animate() method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes
的jQuery UI的项目通过允许一些非数字样式诸如待动画颜色延伸.animate（）方法。该项目还包括通过 CSS 类而不是单个属性指定动画的机制
