jQuery如何在鼠标悬停时淡化背景？

Question

有一个没有背景的链接，还有一个CSS规则，在悬停时更改背景。

父元素背景是白色的，链接在悬停时变成蓝色。

我如何缓慢实现从白色到蓝色的悬停效果？

谢谢。

li a {}
li a:hover { background: blue; }

- Gelens

Answer 1

jQuery('a#theLink').hover(function(){
    $(this).stop().animate({backgroundColor: 'blue'});
}, function() {
    $(this).stop().animate({backgroundColor: 'white'});
});

为了使此功能正常工作，您需要下载 jQuery 的"color插件"。

- James

Answer 2

你不需要额外的颜色插件。你只需要在 jQuery 的基础上安装 jQuery UI，这样就可以在动画中使用颜色了。(或者如果由于某些原因您不想使用 jQuery UI，我猜另一个插件也可以胜任。但我已经成功地尝试过仅包含 jQuery 核心和 jQuery UI 来实现此目的。) 动画本身大致如下...

$("li").hover(function() {
  $(this).animate({
    backgroundColor: "#ffffff"
  }, 'slow');
});

- Jaanus

---

我知道在现今的计算机中，文件大小在千字节级别上并不是太大的问题（尽管东西确实会累加），但仅供记录：jquery.color.js - 4k | jquery-ui-1.8rc3.custom.min.js - 64k。 - Dave Everitt

很显然，因为没有其他人提到过，如果你已经在使用jQuery UI，那么你可以直接使用。如果你还没有使用jQuery UI，那么不要为了这个功能而开始使用它--使用颜色插件即可。 - MikeJ

也许在发布时这是正确的，但现在来看... "例如，宽度、高度或左侧可以进行动画处理，但背景颜色不能，除非使用jQuery.Color()插件" http://api.jquery.com/animate/ - tomfumb

Answer 3

bgFade 是一个非常棒且简单的插件，可以动画地显示背景图片：

http://www.isthatclear.com/jquery/bgFade/

- tothemario

Answer 4

你需要使用插件，因为JQuery本身无法动画化颜色。

尝试使用Color Animation插件。

然后就可以像这样：

$(this).animate({ backgroundColor: "blue" }, 'slow');

- Fermin

---

这些链接没有任何作用，只是指向 jQuery 网站。与 James 的回答相同。 - user3173360

答案已经有近5年的历史了，所以链接可能已经失效了。不过，现在你可以使用JQuery UI来实现颜色动画：http://jqueryui.com/animate/ - Fermin

Answer 5

为了实现颜色动画，你需要 颜色插件。

- Jason Punyon