jQuery .animate() 无法正常工作答案

【问题标题】：jQuery .animate() not working properlyjQuery .animate() 无法正常工作
【发布时间】：2012-07-03 02:07:04
【问题描述】：

我正在设计一个网站，为了实现效果，我遇到了下面一组 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>

【问题讨论】：

“但它不起作用”是什么意思？
@gdoron：当我们将鼠标悬停时，颜色会变为另一种颜色
@krish - 使用十六进制代码设置颜色时，您必须使用 3 个字符的十六进制代码或 6 个字符。没有 4 个字符的实现。
附带说明，在 JavaScript 中，由于我不会在这里费力，最好将左大括号放在同一行，而不是在下一行。

标签： javascript jquery animation colors

【解决方案1】：

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

来自animate：

例如，宽度、高度或左侧可以设置动画，但 background-color 不能，除非使用了 jQuery.Color() 插件

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

【讨论】：

【解决方案2】：

你不能为颜色设置动画！

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

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

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

Working DEMO using jQuery UI

【讨论】：

【解决方案3】：

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

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

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

【讨论】：