如何淡入淡出 .addClass。
这是链接 -
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)
为此。
此外,您可以简化选择器,它看起来像 :even
和 :odd
将根据您当前的选择器完成工作,如下所示:
$(function() {
$('#menu li:even').hover(function() {
$(this).toggleClass('pretty-hover', 500);
});
$('#menu li:odd').hover(function() {
$(this).toggleClass('pretty-hover_01', 500);
});
});
我意识到上面的内容似乎是倒退的,但是 :even
确实选择了 第一个 元素,因为它是从 0 开始的,所以甚至选择第 0 个、第 2 个、第 4 个等。我希望你会同意,这样更容易维护:)
根据评论进行编辑 - 由于 .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);
});
关于jquery 添加淡入淡出到 .addClass,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2719178/