jQuery为.addClass添加淡入淡出 [英] jquery add a fade to an .addClass
问题描述
如何淡入和淡出.addClass.
How do I fade .addClass in and out.
这是链接-
http://www.bikramyogajoondalup.com.au/about-bikram-yoga/postures-benefits.html
这是代码-
$(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');
});
});
谢谢
推荐答案
如果可以选择jQuery UI,则可以使用 .toggleClass(class, duration)
.
If jQuery UI is an option, you can use .toggleClass(class, duration)
for this.
此外,您可能可以简化选择器,它看起来像 :even
和<一个href ="http://api.jquery.com/odd-selector/" rel ="noreferrer"> :odd
会根据您当前的选择器来完成这项工作,就像这样:
Also, you can probably simplify your selector, it looks like :even
and :odd
will do the job based on your current selector, like this:
$(function() {
$('#menu li:even').hover(function() {
$(this).toggleClass('pretty-hover', 500);
});
$('#menu li:odd').hover(function() {
$(this).toggleClass('pretty-hover_01', 500);
});
});
我意识到上面的内容似乎是倒退的,但是:even
确实选择了 first 元素,因为它是基于0的,所以甚至选择了0th,2nd,4th等.我希望你会同意,使维护起来更容易:)
I realize the above seems backwards, but :even
does select the first element, because it's 0 based, so even selects 0th, 2nd, 4th, etc. I hope you'll agree, makes it a bit easier to maintain :)
基于评论进行编辑-由于.toggleclass()
会一直停留在快速悬停上,因此这是一种可以按预期工作的替代方法,只是需要更长的时间:
Edit based on comments - Since .toggleclass()
sticks on quick hovers, here's an alternative that works as expected, just a bit longer:
$('#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);
});
这篇关于jQuery为.addClass添加淡入淡出的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!