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的元素，因此即使选择0th，第二，第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);  
});

Answer 2

如果要淡化元素的颜色，则需要使用 jQuery UI 它对褪色和动画具有更高级的支持（核心jQuery只能褪色/动画整数属性：颜色不起作用）。

它甚至支持动画化所有属性 整个CSS课程, ，因此使用jQuery UI，您应该能够达到所需的效果。

Answer 3

jQuery 生命 功能是最好的选择，尽管这不会让您在CSS类之间进行动画 - 您必须指定各个样式。

您会更好地使用JQQuery UI，因为这将提供此类功能，如jQuery中所述 动画 页：

这 jQuery UI Project通过允许一些非数字样式（例如颜色）进行动画，从而扩展了.ainimate（）方法。该项目还包括用于通过CSS类指定动画的机制，而不是单个属性