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

基本的jQuery版本的animate不能生动的颜色，只是东西直的数字值。从文件中：

动画属性和值

所有动画属性都应该动画为单个数值，除非如下所述；大多数非数字属性不能使用基本的jQuery功能进行动画(例如，width、height或left可以动画化，但background-color不能动画，除非使用jQuery.Color()插件)。除非另有规定，属性值被视为若干像素。在适用的情况下，可以指定单元em和%。

它有一些插件(比如上面链接的插件)和该功能包含在jQuery用户界面中。。

Answer 2

有时我会使用jquery，但我大部分时间都使用css。

下面是应用css中的transition的一个用过的小例子。

JSFiddle

希望你喜欢你的css文件。(：