jquery 为 .addClass 添加淡入淡出答案

【问题标题】：jquery add a fade to an .addClassjquery 为 .addClass 添加淡入淡出
【发布时间】：2011-02-12 17:36:56
【问题描述】：

如何淡入淡出 .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 jquery-animate fading

【解决方案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 确实选择了 first 元素，因为它是基于 0 的，所以甚至选择了第 0、第 2、第 4 等。我希望你会同意，使它更容易维护:)

基于 cmets 编辑 - 由于 .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);  
});

【讨论】：

我已经在一个新页面上实现了代码并且效果很好。我只有一个问题。当我快速将鼠标悬停在列表项上时，淡入淡出没有完成并且似乎有点卡住了。有什么想法吗？
抱歉链接是aus-media.com/dev/site_BYJ/about-bikram-yoga/…
@Nik - 不知道为什么 toggleClass 会这样，看来你不是唯一看到这种行为的人。我使用.animate() 替代方案更新了答案，该替代方案可以按您的预期工作，还不错，因为您只是为几个属性设置动画。
克雷弗先生，你的传奇！如果可以的话，我一定会给你的建议打分。再次感谢！

【解决方案2】：

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

它甚至支持动画an entire CSS class中的所有属性，所以使用jQuery UI，你应该可以达到你想要的效果。

【讨论】：

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

【解决方案3】：

jQuery .animate 函数是最好的选择，虽然这不会让您在 CSS 类之间制作动画 - 您必须指定单独的样式。

您最好使用 jQquery UI，因为这将提供此类功能，如 jQuery animate 页面中所述：

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

【讨论】：