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和%。

有一些插件（例如上面链接的插件）和the functionality is included in jQuery UI。

Answer 2

有时我会使用jquery，但我大部分时间都使用css 这里有一个使用来自css的transition的例子。

JSFiddle

希望你喜欢它的css文件。（：

jQuery - 在.css上使用.animate

2 个答案: