0

我正在设计一个网站，对于效果，我遇到了下面的一组 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>
4

3 回答 3

7

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

此外，默认的 jQuery.animate不会为颜色设置动画。您必须为此使用 jQuery UI（或Color 插件）。

于 2012-07-02T16:17:26.973 回答
2

你不能为颜色设置动画！ 

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

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

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

使用 jQuery UI 工作的 DEMO

于 2012-07-02T16:19:03.283 回答
1

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

从动画：

例如，宽度、高度或左侧可以设置动画，但背景颜色不能设置，除非使用 jQuery.Color() 插件

注意：jQuery UI 项目扩展了 .animate() 方法，允许对一些非数字样式（例如颜色）进行动画处理。该项目还包括通过 CSS 类而不是单个属性指定动画的机制。

于 2012-07-02T16:19:15.320 回答