Question

我正在设计一个网站和效果我遇到了下面的jquery代码集，用于通过动画实现文本颜色更改。但它不起作用，我不确定是什么问题。

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

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（或Color plugin）。

使用颜色插件进行演示：http://jsfiddle.net/FMTDp/13/
使用jQuery UI进行演示：http://jsfiddle.net/FMTDp/15/

Answer 2

您无法为颜色设置动画！

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

除非你添加对jQuery UI的引用。

除非如下所述，否则应将所有动画属性设置为单个数值。大多数非数字属性无法使用基本的jQuery功能进行动画处理（例如，宽度，高度或左边可以设置动画，但背景颜色不能，除非使用了jQuery.Color（）插件）。

Working DEMO using jQuery UI

Answer 3

您需要使用jQuery UI或jQuery插件来设置颜色动画。您还使用了错误的颜色代码，请使用#fff或#ffffff。

来自animate：

例如，宽度，高度或左边可以设置动画但是   background-color不能，除非使用了jQuery.Color（）插件

注意：jQuery UI项目通过允许扩展.animate（）方法   一些非数字样式，如要设置动画的颜色。该项目   还包括通过CSS类指定动画的机制   而不是个人属性。

jQuery .animate（）无法正常工作

3 个答案: