jquery为.addClass添加淡入淡出

Question

我如何淡入淡出.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');
  });
});

谢谢

Answer 1

如果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);  
});