Velocity.js 动画颜色变化
Animating color change in Velocity.js
我刚开始使用 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"});
我做错了什么?
根据 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>
希望对您有所帮助。
P.S。您正在尝试加载多个 jQuery 版本,即 1.8.3
和 1.9.1
。删除不需要的。
您可以使用 backgroundColor 与 Fill 来完成。
var colorCode = "#D32D27"
$("#ColorDIV").velocity({
backgroundColor: colorCode,
opacity: 1
}, 1000);
colorCode = "#FFDD00"
$("#ColorDIV").velocity({
backgroundColor: colorCode,
opacity: 1
}, 1000);
我刚开始使用 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"});
我做错了什么?
根据 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>
希望对您有所帮助。
P.S。您正在尝试加载多个 jQuery 版本,即 1.8.3
和 1.9.1
。删除不需要的。
您可以使用 backgroundColor 与 Fill 来完成。
var colorCode = "#D32D27"
$("#ColorDIV").velocity({
backgroundColor: colorCode,
opacity: 1
}, 1000);
colorCode = "#FFDD00"
$("#ColorDIV").velocity({
backgroundColor: colorCode,
opacity: 1
}, 1000);