jQuery - 在 .css 上使用 .animate

Question

我写了这个脚本，它在悬停“a”时改变一些元素的颜色

$( "p > a" ).mouseover(function() {
  $('h3 a, .date, .post.text, p').css( "color", "#ddd" );
});
$( "a" ).mouseleave(function() {
  $('h3 a, .date, .post.text, p').css( "color", "#585858" );
});

这很好用，但我希望它在这两种状态之间淡出。我尝试实现 .animate 但它不起作用。我仍然是 jQuery 的学习者，所以我可能遗漏了一些要点。

想法是通过调暗周围文本的颜色来突出悬停元素 (a)。也许还有比在 css 中更改颜色更好的方法。

谢谢

Answer 1

animate 的基本 jQuery 版本不能为颜色设置动画，只能为具有直接数值的东西设置动画。来自文档:

Animation Properties and Values

所有动画属性都应该被动画化为一个单个数值，除了下面提到的；大多数非数字属性无法使用基本的 jQuery 功能进行动画处理(例如，width、height 或 left 可以进行动画处理，但 background-color 不能，除非使用 jQuery.Color() 插件)。除非另有说明，否则属性值被视为像素数。可以在适用的地方指定单位 em 和 %。

它有一些插件(例如上面链接的那个)，和 the functionality is included in jQuery UI .