jQuery .animate()不能正常工作

Question

我正在设计一个网站，为了达到效果，我遇到了以下一组jquery代码，以实现动画文本颜色的改变。但这不起作用，我也不知道出了什么问题。

JSFIDDLE

下面是我目前遇到的问题代码：

jQuery:

$('.list-5 li a').hover(function() {
    $(this).stop().animate({ color: '#fff' })
}, function() {
    $(this).stop().animate({ color: '#0e1b23' })
})

HTML:

  <div class="list-5">
    <ul>
     <li>
       <a href="#">Hello world</a> 
     </li>
    </ul>
  </div>

Answer 1

#FFFF是无效的颜色。使用#FFF或#FFFFFF。

此外，默认的jQuery .animate不显示颜色。为此，您必须使用jQuery UI (或彩色插件)。

• 使用彩色插件的演示：http://jsfiddle.net/FMTDp/13/
• 使用jQuery UI：http://jsfiddle.net/FMTDp/15/的演示

Answer 2

你不能动色彩！

.animate({
        color: '#ffff'
    });

除非您添加了对jQuery UI的引用。

所有动画属性都应该动画为单个数值，除非如下所述；大多数非数字属性不能使用基本的jQuery功能进行动画(例如，宽度、高度或左侧可以动画，但背景色不能动画，除非使用jQuery.Color()插件)。

使用jQuery UI的工作演示

Answer 3

您需要使用jQuery UI或jQuery插件来动画色彩。您也使用错误的颜色代码，使用#fff或#ffffff。

来自动画制作

例如，除非使用jQuery.Color()插件，否则宽度、高度或左侧可以动画化，但背景色不能显示。 注意: jQuery UI项目扩展了.animate()方法，允许一些非数字样式(如颜色)被动画化。该项目还包括通过CSS类而不是单个属性指定动画的机制。