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

Answer 2

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

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

Answer 3

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

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

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

jquery为.addClass添加淡入淡出

3 个答案: