Velocity.js 中的动画颜色变化答案

【问题标题】：Animating color change in Velocity.jsVelocity.js 中的动画颜色变化
【发布时间】：2015-07-12 20:07:00
【问题描述】：

我刚刚开始使用 Velocity.js，并正在尝试制作一个简单的动画，将圆圈的颜色从红色变为黄色。我拥有的 HTML 只是...

<!DOCTYPE html>
<html>
<head>
  <link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
  <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js"></script>
  <script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.ui.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <svg height=300 width=300>
    <circle id="example" cx=50 cy=50 r=20 fill="red"></circle>
  </svg>
</body>
</html>

...我正在尝试在我的 JavaScript 中将圆圈的颜色更改为黄色，如下所示：

$('#example')
   .delay(1000)
   .velocity({fill: "yellow"});

我做错了什么？

【问题讨论】：

标签： javascript jquery svg jquery-animate velocity.js

【解决方案1】：

根据 velocity.js docs，您需要将填充颜色值作为十六进制字符串传递：

片段：

$('#example').delay(1000).velocity({ fill: '#ffff00' }, { duration: 2000 });

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.ui.min.js"></script>
<svg height=300 width=300>
    <circle id="example" cx=50 cy=50 r=20 fill="red"></circle>
</svg>

希望这会有所帮助。

附：您正在尝试加载多个 jQuery 版本，即 1.8.3 和 1.9.1。删除不必要的。

【讨论】：

【解决方案2】：

您可以使用 backgroundColor 与 Fill 来完成。

  var colorCode = "#D32D27"
    $("#ColorDIV").velocity({ 
          backgroundColor: colorCode,
          opacity: 1
    }, 1000);           

    colorCode = "#FFDD00"
    $("#ColorDIV").velocity({ 
          backgroundColor: colorCode,
          opacity: 1
    }, 1000);

【讨论】：

请给出一些解释，因为仅代码的答案对其他用户没有多大价值。