如何褪色.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);
});
});
我意识到上面似乎倒退了，但是：甚至选择第一个元素，因为它是基于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',500);
});
