17

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

谢谢

4

3 回答 3

13

如果 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);  
});
于 2010-04-28T00:44:27.453 回答
0

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

它甚至支持对整个 CSS 类中的所有属性进行动画处理，因此使用 jQuery UI，您应该能够实现您想要的效果。

于 2010-04-27T06:41:55.297 回答
0

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

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

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

于 2010-04-27T07:36:27.960 回答