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');
  });
});

谢谢

- Nik

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开始计数的，所以:even选择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);  
});

- Nick Craver

---

我已经在一个新页面上实现了代码，它运行良好。只有一个问题。当我快速悬停在列表项上时，淡入淡出效果似乎无法完成并且有点卡顿。有什么想法吗？ - Nik

抱歉，链接为http://www.aus-media.com/dev/site_BYJ/about-bikram-yoga/postures-benefits.html。 - Nik

@Nik - 不确定为什么toggleClass会像那样粘着，不过似乎你不是唯一看到这种行为的人。我更新了答案，提供了一个.animate()的替代方案，它可以按照你的期望工作，而且只需要动画化几个属性，还不错。 - Nick Craver

Craver先生，您是传奇！我一有机会，一定会采纳您的建议。再次感谢您！ - Nik

Answer 2

如果您想淡化元素的颜色，您需要使用 jQuery UI，它具有更先进的淡入淡出和动画支持（核心 jQuery 只能淡入淡出/动画整数属性：颜色不可以）。

它甚至支持动画播放 整个 CSS 类 中的所有属性，因此使用 jQuery UI，您应该能够实现所需的效果。

- Dean Harding

---

谢谢大家，我会尝试一下UI。下载包看起来不错！ - Nik

Answer 3

jQuery的.animate函数是最好的选择，虽然它不能在CSS类之间实现动画效果 - 您必须指定单个样式。

您最好使用jQquery UI，因为它可以提供这种功能，如jQuery animate页面所述：

jQuery UI项目通过允许一些非数字样式（例如颜色）进行动画化来扩展.animate()方法。该项目还包括通过CSS类而不是单个属性来指定动画的机制

- James Wiseman